Redux būsenos struktūros keitimas

Pirmas etapas, kurį įgyvendinsime kad sąveikautų mūsų Redux aplikacija su kokiu nors išoriniu serveriu - tai duomenų gavimas, kuriame jie saugomi paleidus aplikaciją. Bet pirmiausia įneškime keletą mūsų aplikacijos pakeitimų.

Atidarykime mūsų produktų aplikaciją, o joje failą productsSlice.js. Atkreipkite dėmesį į initialState apibrėžimą. Iš pradžių mūsų produktų sluoksnis productsSlice - tai masyvas, kuriame yra objektai (mūsų atveju jų yra du) su produkto duomenimis. Pirma, kadangi dabar mes juos įkelsime iš serverio, turime juos pašalinti iš initialState. Antra, mes siųsime serverio API užklausas ir mums bus svarbu žinoti jų būseną. Atsižvelgdami į šiuos du dalykus, perdirbkime initialState. Tegul dabar tai būna tiesiog objektas su laukais products (iš pradžių čia nebus jokių duomenų, o tiesiog tuščias masyvas), status ir error. Dabar mūsų initialState kodas taps šiek tiek trumpesnis:

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

Kol kas nustatėme būseną 'idle' (neveiklumas), juk iš pradžių mes neišsiunčiame jokių užklausų, o apskritai ji keisis ir gali įgauti reikšmes 'loading', 'succeeded', 'failed'. Atminkite, kad būsenos žymėjimui galite pasirinkti tokius pavadinimus, kurie jums bus patogūs.

Judame žemyn kodu. Po pakeisto initialState, turime pakeisti ir kodą, kuriame dirbame su šia būsena reducerio funkcijose. Pažiūrėkime į productAdded kodą:

state.push(action.payload)

Dabar naujus produktus dėsime ne tiesiog į state for products, o į jo savybę state.products. Todėl pakeiskime aukščiau nurodytą eilutę į:

state.products.push(action.payload)

Atitinkamai, atlikime tuos pačius pakeitimus reduceriui reactionClicked. Vietoj:

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

Dabar bus:

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

Pakeiskite patys state į state.products ir reducerio productUpdated kode.

Atidarykite savo studentų aplikaciją. Atidarykite jame failą studentsSlice.js. Tegul dabar jūsų initialState turi tris savybes: students, status, error - perdirbkite jį, kaip parodyta pamokoje.

Atlikite atitinkamus pakeitimus ir žemiau pagal kodą. Pakeiskite state į state.students savo trijų reducerio funkcijų kode.