Zmena štruktúry stavu v Reduxe

Prvý krok, ktorý budeme realizovať pre interakciu našej Redux aplikácie s nejakým externým serverom - je získanie dát, ktoré sú na ňom uložené pri spustení aplikácie. Ale predtým, poďme vykonať v našej aplikácii niektoré zmeny.

Otvorme našu aplikáciu s produktmi, a v nej súbor productsSlice.js. Všimnite si definíciu initialState. Pôvodne náš slice s produktmi productsSlice - je to pole, v ktorom sú objekty (v našom prípade sú dva) s údajmi produktov. Po prvé, pretože teraz ich budeme načítavať zo servera, potrebujeme ich odstrániť z initialState. Po druhé, budeme posielať na server API požiadavky a bude pre nás dôležité vedieť o ich stave. Berúc do úvahy tieto dve veci, poďme prepracovať initialState. Nech je to teraz jednoducho objekt s poliami products (pôvodne tu nebudú žiadne dáta, ale prázdne pole), status a error. Teraz sa náš kód pre initialState stane o niečo kratším:

const initialState = {
	products: [],
	status: 'idle',
	error: null,
}

Zatiaľ sme nastavili status 'idle' (nečinnosť), pretože pôvodne neodosielame žiadne požiadavky, ale vo všeobecnosti sa bude meniť a môže nadobúdať hodnoty 'loading', 'succeeded', 'failed'. Pamätajte, že na označenie stavu môžete zvoliť tie mená, ktoré budú pre vás pohodlné.

Klesáme nižšie podľa kódu. Následne po zmene initialState, musíme zmeniť aj kód, v ktorom pracujeme s týmto stavom v funkciách-reduktoroch. Pozrime sa na kód pre productAdded:

state.push(action.payload)

Teraz nové produkty budeme ukladať nie jednoducho do state pre produkty, ale do jeho vlastnosti state.products. Preto nahraďme vyššie uvedený riadok:

state.products.push(action.payload)

V súlade s tým, urobme tie isté zmeny pre reduktor reactionClicked. Namiesto:

const currentProduct = state.find((product) => product.id === productId)

Teraz bude:

const currentProduct = state.products.find((product) => product.id === productId)

Nahraďte sami state za state.products a v kóde reduktora productUpdated.

Otvorte vašu aplikáciu so študentmi. Otvorte v nej súbor studentsSlice.js. Nech teraz váš initialState má tri vlastnosti: students, status, error - prepracujte ho, ako je ukázané v lekcii.

Vykonajte zodpovedajúce zmeny a nižšie podľa kódu. Nahraďte state za state.students v kóde pre vaše tri funkcie-reduktory.