Ändring av state-strukturen i Redux

Det första steget som vi kommer att implementera för interaktion mellan vår Redux-applikation och någon extern server är att hämta data som lagras på den när applikationen startas. Men låt oss först göra några ändringar i vår applikation.

Låt oss öppna vår produktapplikation, och i den filen productsSlice.js. Notera definitionen av initialState. Ursprungligen är vår produkt-slice productsSlice en array som innehåller objekt (i vårt fall finns det två) med produktdata. För det första, eftersom vi nu kommer att ladda dem från servern, måste vi ta bort dem från initialState. För det andra kommer vi att skicka API-förfrågningar till servern och det kommer att vara viktigt för oss att känna till deras status. Med hänsyn till dessa två saker, låt oss ändra om initialState. Låt det nu bara vara ett objekt med fälten products (initialt kommer det inte att finnas någon data här, utan bara en tom array), status och error. Nu kommer vår kod för initialState att bli lite kortare:

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

För nu har vi satt statusen till 'idle' (overksam), eftersom vi initialt inte skickar några förfrågningar, men generellt kommer den att ändras och kan anta värden som 'loading', 'succeeded', 'failed'. Kom ihåg att du för att beteckna status kan välja de namn som är bekväma för dig.

Låt oss gå längre ner i koden. Efter förändringen av initialState bör vi också ändra koden där vi arbetar med detta state i reducer-funktionerna. Låt oss titta på koden för productAdded:

state.push(action.payload)

Nu kommer vi att lägga till nya produkter inte bara i state för produkter, utan i dess egenskap state.products. Därför, låt oss byta ut raden ovan mot:

state.products.push(action.payload)

Följaktligen, låt oss göra samma ändringar för reducern reactionClicked. Istället för:

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

Kommer det nu att bli:

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

Byt själv ut state mot state.products i koden för reducern productUpdated.

Öppna din studentapplikation. Öppna filen studentsSlice.js i den. Låt nu din initialState ha tre egenskaper: students, status, error - ändra om den, som visas i lektionen.

Gör motsvarande ändringar längre ner i koden. Byt ut state mot state.students i koden för dina tre reducer-funktioner.