Reducer na Action katika Redux

Katika somo lililopita tulimaliza fomu ya kuongeza bidhaa na tukaionyesha kwenye ukurasa mkuu. Lakini kwa sasa data iliyoongezwa haihifadhiwi, kwa maneno mengine bidhaa mpya haiongezewi kwenye zile zilizopo katika duka. Hebu turekebishe hili.

Kwa kuanzia, katika programu yetu ya bidhaa tutafungua faili productsSlice.jsx na kuandika katika sifa reducer ya createSlice kitendo productAdded, ambacho kitashughulikia kuongeza bidhaa kwenye duka kulingana na hali ya sasa na kitendo kilichopitishwa kwake. Ni muhimu kukumbuka kuwa hapa hatupitishi hali yote, bali ni sehemu yake tu ambayo inahusika na bidhaa (kipande products kinajua tu kuhusu hiyo). Kitu chenye bidhaa mpya kitakuwa kwenye sifa payload ya kitu action, ambacho kitatengenezwa na kishughulikiaji kinapobonyezwa kitufe cha kuhifadhi kwenye fomu. Kwa matokeo, reducer productAdded itaonekana kwenye msimbo wa createSlice kama hivi:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {
		productAdded(state, action) {
			state.push(action.payload)
		},
	},
})

Vipi kuhusu action? Mwanzoni mwa mwongozo tulitaja kuwa action - ni tukio fulani lililowakilishwa kama kitu, likielezea kile kilichotokea kwenye programu. Pia tulizungumza kuwa inawezekana kutumia kitendo creator, ambacho kitatengeneza kitu kama hicho, kwa mfano hivi:

const addProduct = newProduct => {
	return {
		type: 'products/productAdded',
		payload: newProduct
	}
}

Habari njema ni kwamba hatuhitaji kufanya chochote, na hii itafanywa kwa ajili yetu na kitendo createSlice, ambacho tunatumia. Mara tu tulipoandika reducer, itatengeneza kwa automatikon action creator kwa jina sawa. Tunabaki tu kuhamisha nje action creator iliyopatikana kwa matumizi zaidi katika sehemu. Tufanye hivi mwishoni mwa faili kabla ya kuhamisha reducer nje, kama hivi:

export const { productAdded } = productsSlice.actions
export default productsSlice.reducer

Fungua programu yako ya wanafunzi, kisha faili studentsSlice.jsx, ongeza thamani ya uga reducer kwa createSlice, kama ilivyoonyeshwa kwenye somo.

Ongeza mwishoni mwa faili studentsSlice.jsx kuhamisha nje kwa kitendo creator iliyopatikana.