Redux-tilan rakenteen muuttaminen

Ensimmäinen vaihe, jonka toteutamme Redux-sovelluksemme vuorovaikutukseen jonkin ulkoisen palvelimen kanssa, on siihen tallennettujen tietojen haku sovelluksen käynnistyessä. Mutta ennen sitä tehkäämme joitakin muutoksia sovellukseemme.

Avataan tuotesovelluksemme ja sen sisällä tiedosto productsSlice.js. Huomioikaa initialState:n määritelmä. Alun perin tuotesliceemme productsSlice on taulukko, joka sisältää objekteja (meillä niitä on kaksi) tuotetiedoilla. Ensinnäkin, koska nyt aiomme ladata ne palvelimelta, meidän on poistettava ne initialState:sta. Toiseksi, aiomme lähettää palvelimelle API-pyyntöjä ja meille on tärkeää tietää niiden tilasta. Näitä kahta asiaa huomioiden, muutetaan initialState. Olkoon se nyt yksinkertainen objekti kentillä products (alussa täällä ei ole mitään tietoja, vaan tyhjä taulukko), status ja error. Nyt koodimme initialState:lle tulee hieman lyhyemmäksi:

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

Toistaiseksi olemme asettaneet statukseksi 'idle' (toimettomuus), sillä aluksi emme lähetä mitään pyyntöjä, ja yleensä se muuttuu ja voi saada arvoja 'loading', 'succeeded', 'failed'. Muistakaa, että statuksen merkitsemiseen voitte valita ne nimet, jotka ovat käteviä teille.

Menkäämme alemmas koodissa. initialState:n muutoksen jälkeen meidän on muutettava myös koodi, jossa työskentelemme tämän tilan kanssa reducer-funktioissa. Katsotaan koodia productAdded:lle:

state.push(action.payload)

Nyt uudet tuotteemme aiomme tallentaa ei vain tuotteiden stateen, vaan sen ominaisuuteen state.products. Siksi korvataan yllä oleva rivi seuraavalla:

state.products.push(action.payload)

Vastaavasti teemme samat muutokset reducerille reactionClicked. Sen sijaan:

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

Nyt tulee:

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

Korvatkaa itse state state.products:llä myös reducerin productUpdated koodissa.

Avatkaa opiskelijasovelluksenne. Avatkaa sen sisällä tiedosto studentsSlice.js. Olkoon nyt initialState:llänne kolme ominaisuutta: students, status, error - muunnelkaa sitä, kuten oppitunnilla on näytetty.

Tee vastaavat muutokset myös alempana koodissa. Korvaa state state.students:llä kolmen reducer-funktionne koodissa.