Zmiana struktury stanu w Redux

Pierwszy etap, który będziemy implementować dla interakcji naszej aplikacji Redux z jakimś zewnętrznym serwerem - to pobranie danych, które są na nim przechowywane przy uruchomieniu aplikacji. Ale najpierw wprowadźmy do naszej aplikacji pewne zmiany.

Otwórzmy naszą aplikację z produktami, a w niej plik productsSlice.js. Zwróć uwagę na definicję initialState. Początkowo nasz slice z produktami productsSlice - to tablica, w której znajdują się obiekty (w naszym przypadku są dwa) z danymi produktów. Po pierwsze, ponieważ teraz będziemy je ładować z serwera, to musimy je usunąć z initialState. Po drugie, będziemy wysyłać do serwera zapytania API i ważne będzie dla nas znać ich status. Biorąc pod uwagę te dwie rzeczy, przeróbmy initialState. Niech teraz to będzie po prostu obiekt z polami products początkowo nie będzie tu żadnych danych, a po prostu pusta tablica), status i error. Teraz nasz kod dla initialState stanie się nieco krótszy:

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

Na razie ustawiliśmy status 'idle' (bezczynność), przecież początkowo nie wysyłamy żadnych zapytań, a ogólnie będzie się zmieniać i może przyjmować wartości 'loading', 'succeeded', 'failed'. Pamiętaj, że dla oznaczenia statusu możesz wybrać te nazwy, które będą dla ciebie wygodne.

Schodzimy niżej po kodzie. Po zmianie initialState, powinniśmy zmienić również kod, w którym pracujemy z tym stanem w funkcjach-reducerach. Spójrzmy na kod dla productAdded:

state.push(action.payload)

Teraz nowe produkty będziemy składać nie po prostu w state dla produktów, a w jego właściwość state.products. Dlatego, zamieńmy powyższą linię na:

state.products.push(action.payload)

Odpowiednio, wykonajmy te same zmiany dla reducera reactionClicked. Zamiast:

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

Teraz będzie:

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

Zamień samodzielnie state na state.products i w kodzie reducera productUpdated.

Otwórz twoją aplikację ze studentami. Otwórz w niej plik studentsSlice.js. Niech teraz twój initialState ma trzy właściwości: students, status, error - przerób go, jak pokazano na lekcji.

Wprowadź odpowiednie zmiany i niżej w kodzie. Zamień state na state.students w kodzie dla twoich trzech funkcji-reducerów.