Redux-daky ýagdaýyň gurluşyny üýtgetmek

Bizim Redux aplikasiýamyzyň daşary serwer bilen araçäklileşigi üçin amala aşyrjak ilkinji basgançak - bu aplikasiýa işledilende onuň üstünde saklanýan maglumatlary alyşdyr. Emma öňünden gelin, aplikasiýamyza käbir üýtgeşmeleri girizeliň.

Önümler bilen bolan aplikasiýamyzy, we onuň içinde productsSlice.js faýlyny açalyň. initialState kesgitlemesine üns beriň. Başlangyçda önümler bilen bolan bölümiňiz productsSlice - bu önüm baradaky maglumatlar (bizim ýagdaýymyzda olardan iki sany) bilen bolan obyektleri öz içine alýan massiwdir. Birinjiden, indi biz olary serwerden ýüklemelidigimiz üçin, olary initialState -den aýyrmaly. Ikinjiden, biz serwere soraglary iberjek we olaryň ýagdaýy barada bilmek biziň üçin möhüm bolar. Bu iki zatlary hasaba alanyňyzda, geliň initialState -y gaýtadan guralyň. Indi bu diňe products meýdanlary bilen bolan obyekt bolsun (başlangyçda bu ýerde hiç hili maglumat bolmaz, diňe boş massiw), status we error. Indi initialState üçin biziň kodymyz birneme gysgalar:

products/productsSlice.jsconst initialState = {
  products: [],
  status: 'idle',
  error: null,
}

Häzirlikçe biz ýagdaýy 'idle' (işsizlik) edip bellädik, sebäbi başlangyçda hiç hili sorag ibermeýäris, emma ýöne umumanyň ýagdaýy üýtgep biler we 'ýüklemek', 'ýerine ýetirildi', 'ýüklemek ýalňyşlygy' ýaly gymmatlyklary kabul edip biler. Ýagdaýy belläp görkezmek üçin siz özüňize amatly boljak atlary saýlap bilersiňizi ýadyňyzdan çykarmaň.

Kod boýunça aşak düşeliň. initialState -yň üýtgemegi bilen baglanyşykly, bu ýagdaý bilen işleýän funksiýa-redýuserlerimiziň kodyny hem üýtgetmelidigimize üns bereliň. productAdded üçin bolan koda göz aýlalyň:

products/productsSlice.jsstate.push(action.payload)

Indi täze önümleri diňe önümler üçin bolan state-a salan däl-de, onuň state.products aýratynlygyna salarys. Şonuň üçin ýokarda görkezilen setiri şuna çalyşdyrarys:

products/productsSlice.jsstate.products.push(action.payload)

Degişlilikde, redýuser reactionClicked üçin hem şol üýtgeşmeleri amala aşyralyň. Bunyň ýerine:

products/productsSlice.jsconst currentProduct = state.find((product) => product.id === productId)

Indi bu bolar:

products/productsSlice.jsconst currentProduct = state.products.find((product) => product.id === productId)

state -y state.products bilen productUpdated redýuseriniň kodunda hem özüňiz çalyşdyryň.