Změna struktury stavu v Reduxu

První etapa, kterou budeme implementovat pro interakci naší Redux aplikace s nějakým externím serverem - je získání dat, která jsou na něm uložena při spuštění aplikace. Ale dříve pojďme do naší aplikace provést některé změny.

Otevřeme naši aplikaci s produkty, a v ní soubor productsSlice.js. Všimněte si definice initialState. Původně náš slice s produkty productsSlice - je pole, ve kterém jsou objekty (v našem případě jsou dva) s daty produktů. Za prvé, protože je nyní budeme nahrávat ze serveru, musíme je odstranit z initialState. Za druhé, budeme posílat na server API požadavky a bude pro nás důležité znát jejich stav. S ohledem na tyto dvě věci pojďme předělat initialState. Ať je to nyní prostě objekt s poli products (zpočátku zde nebudou žádná data, ale prázdné pole), status a error. Nyní náš kód pro initialState bude o něco kratší:

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

Prozatím jsme nastavili status 'idle' (nečinnost), protože zpočátku neposíláme žádné požadavky, ale obecně se bude měnit a může přijímat hodnoty 'loading', 'succeeded', 'failed'. Pamatujte, že pro označení stavu si můžete vybrat ta jména, která jsou pro vás výhodná.

Klesáme níže po kódu. Následně po změně initialState, musíme změnit i kód, ve kterém pracujeme s tímto stavem v redukčních funkcích. Podívejme se na kód pro productAdded:

state.push(action.payload)

Nyní budeme nové produkty ukládat ne prostě do state pro produkty, ale do jeho vlastnosti state.products. Proto nahradíme výše uvedený řádek:

state.products.push(action.payload)

Podle toho provedeme stejné změny pro reduktor reactionClicked. Místo:

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

Nyní bude:

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

Nahraďte sami state za state.products v kódu reduktoru productUpdated.

Otevřete vaši aplikaci se studenty. Otevřete v ní soubor studentsSlice.js. Ať nyní váš initialState má tři vlastnosti: students, status, error - předejte jej, jak je ukázáno v lekci.

Proveďte odpovídající změny a níže po kódu. Nahraďte state za state.students v kódu pro vaše tři redukční funkce.