Endring av tilstandstrukturen i Redux

Første trinn, som vi skal implementere for interaksjon mellom vår Redux-applikasjon og en ekstern server, er å hente dataene som er lagret på den når applikasjonen starter. Men først, la oss gjøre noen endringer i applikasjonen vår.

La oss åpne applikasjonen vår med produkter, og i den filen productsSlice.js. Legg merke til definisjonen av initialState. Opprinnelig er skiven vår med produkter productsSlice en matrise som inneholder objekter (i vårt tilfelle er det to) med data om produktene. For det første, siden vi nå skal laste dem fra en server, må vi fjerne dem fra initialState. For det andre, vi skal sende API-forespørsler til serveren, og det vil være viktig for oss å vite statusen deres. Med tanke på disse to tingene, la oss endre initialState. La det nå være et enkelt objekt med feltene products (opprinnelig vil det ikke være noen data her, bare en tom matrise), status og error. Nå vil koden vår for initialState bli litt kortere:

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

Foreløpig har vi satt statusen til 'idle' (hvile), fordi vi initialt ikke sender noen forespørsler, men generelt vil den endre seg og kan ta verdier som 'loading', 'succeeded', 'failed'. Husk at for å angi status kan du velge de navnene som er passende for deg.

La oss scrolle lenger ned i koden. Etter endringen av initialState, bør vi også endre koden der vi jobber med denne tilstanden i reducerfunksjonene. La oss se på koden for productAdded:

state.push(action.payload)

Nå vil vi legge nye produkter ikke bare til state for produkter, men til dens egenskap state.products. Derfor bytter vi ut linjen ovenfor med:

state.products.push(action.payload)

Følgelig gjør vi de samme endringene for reduceren reactionClicked. I stedet for:

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

Vil det nå være:

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

Erstatt selv state med state.products i koden til reduceren productUpdated.

Åpne applikasjonen din med studenter. Åpne filen studentsSlice.js i den. La nå initialState ditt ha tre egenskaper: students, status, error - endre den, som vist i leksjonen.

Gjør de tilsvarende endringene i koden lenger ned. Erstatt state med state.students i koden for dine tre reducerfunksjoner.