Kubadilisha Muundo wa State katika Redux

Hatua ya kwanza ambayo tutatekeleza kwa mwingiliano wa programu yetu ya Redux na server ya nje - ni upatikanaji wa data ambayo imehifadhiwa humo wakati wa kuzindua programu. Lakini kabla ya hayo tuingize programu yetu mabadiliko fulani.

Tufungue programu yetu ya bidhaa, na ndani yake faili productsSlice.js. Zingatia ufafanuzi wa initialState. Hapo mwanzo kipande chetu cha bidhaa productsSlice - ni safu ambayo ina vitu (kwa upande wetu kuna mbili) na data ya bidhaa. Kwanza, kwa kuwa sasa tutakuwa tunapakia kutoka kwa server, basi tunahitaji kuwaondoa katika initialState. Pili, tutatumia kwa server maombi ya API na itakuwa muhimu kujua kuhusu hali yao. Kwa kuzingatia mambo haya mawili, hebu tubadilishe initialState. Sasa basi iwe tu kitu na sehemu products (hapo mwanzo hapakuwa na data yoyote, lakini safu tupu), status na error. Sasa kanuni yetu kwa initialState itakuwa fupi kidogo:

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

Kwa sasa tumeweka status 'idle' (utulivu), kwa maana hapo mwanzo hatutumii maombi yoyote, lakini kwa ujumla itabadilika na inaweza kuchukua maadili 'loading', 'succeeded', 'failed'. Kumbuka kuwa kwa kuashiria hali unaweza kuchagua majina yale yatakayokuwa rahisi kwako.

Tunashuka chini zaidi kulingana na kanuni. Baada ya mabadiliko ya initialState, tunapaswa kubadilisha na kanuni, katika ambayo tunafanya kazi na hali hii katika vitendakazi-reducers. Tuangalie kanuni kwa productAdded:

state.push(action.payload)

Sasa bidhaa mpya tutaziweka si tu kwenye state kwa bidhaa, bali kwenye sifa yake state.products. Kwa hivyo, badilisha mstari ulioonyeshwa hapo juu na:

state.products.push(action.payload)

Kwa kufanana, tufanye mabadiliko sawa kwa reducer reactionClicked. Badala ya:

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

Sasa itakuwa:

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

Badilisha mwenyewe state na state.products na katika kanuni ya reducer productUpdated.

Fungua programu yako ya wanafunzi. Fungua ndani yake faili studentsSlice.js. Sasa basi initialState yako iwe na sifa tatu: students, status, error - ibadilishe, kama inavyoonyeshwa katika somo.

Ingiza mabadiliko yanayofaa na chini kulingana na kanuni. Badilisha state na state.students katika kanuni kwa vitendakazi-vyoureducers vitatu.