Ændring af statestrukturen i Redux

Den første fase, som vi vil implementere for interaktion mellem vores Redux-applikation og en ekstern server, er at hente dataene, der er lagret på den, når applikationen startes. Men lad os først foretage nogle ændringer i vores applikation.

Lad os åbne vores produktapplikation, og i den filen productsSlice.js. Læg mærke til definitionen af initialState. Oprindeligt er vores slice med produkter productsSlice - et array, hvor der er objekter (i vores tilfælde to) med produktdata. For det første, da vi nu vil hente dem fra en server, skal vi fjerne dem fra initialState. For det andet vil vi sende API-forespørgsler til serveren, og det vil være vigtigt for os at kende deres status. I lyset af disse to ting, lad os ændre initialState. Lad det nu være et simpelt objekt med felterne products (initielt vil der ikke være nogen data her, men et tomt array), status og error. Nu vil vores kode for initialState blive lidt kortere:

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

Indtil videre har vi sat status til 'idle' (hvile), da vi oprindeligt ikke sender nogen forespørgsler, men generelt vil den ændre sig og kan antage værdier som 'loading', 'succeeded', 'failed'. Husk, at for at angive status kan du vælge de navne, som er bekvemme for dig.

Lad os scrolle længere ned i koden. Efter ændringen af initialState, skal vi også ændre den kode, hvor vi arbejder med denne state i reducer-funktionerne. Lad os se på koden for productAdded:

state.push(action.payload)

Nu vil vi lægge nye produkter ikke bare i state for produkter, men i dens egenskab state.products. Derfor skal vi erstatte den ovenstående linje med:

state.products.push(action.payload)

Lad os lave de samme ændringer for reduceren reactionClicked. I stedet for:

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

Vil det nu være:

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

Erstat selv state med state.products i koden for reduceren productUpdated.

Åbn din applikation med studerende. Åbn filen studentsSlice.js i den. Lad din initialState nu have tre egenskaber: students, status, error - omstrukturer den, som vist i lektionen.

Foretag de tilsvarende ændringer længere nede i koden. Erstat state med state.students i koden for dine tre reducer-funktioner.