Kuongeza Slice Nyingine katika Redux

Katika masomo yaliyopita tulifanya kazi kwa bidii kwenye slice products kwa ajili ya bidhaa. Katika programu halisi ya Redux, katika hali ya state kunaweza kuwa na slices nyingi kwa malengo mbalimbali. Kwa hivyo katika somo hili tutaongeza katika state slice nyingine kwa ajili ya wauzaji, ambo kwa hakika ndio wataongeza bidhaa katika programu yetu.

Wacha tufungue programu yetu ya bidhaa na jambo la kwanza tutakalofanya, ni katika folda parts tuunde folda nyingine sellers, hapa tutaweka msimbo wote na vitengo vinavyohusu wauzaji.

Sasa, kama ilivyokuwa kwa bidhaa, acha tuunde slice kwa ajili ya wauzaji. Kuanzia, katika folda sellers tuunde faili sellersSlice.js na tuingize ndani yake createSlice:

import { createSlice } from '@reduxjs/toolkit'

Tunaendelea kufanya hatua za kawaida. Kama thamani ya awali kwa slice tuunde wauzaji wanne. Kwa urahisi watakuwa na uga mbili - id na name:

const initialState = [
	{ id: '0', name: 'Super Power' },
	{ id: '1', name: 'Miracle Life' },
	{ id: '2', name: 'Dolls&Toys' },
	{ id: '3', name: 'Granny' },
]

Chini kwa kutumia createSlice tuunde slice sellers, tuwape thamani yake ya awali. Kwa kuwa hatutaongeza wauzaji wala kusasisha data yao baadaye, basi sehemu ya reducers iachwe tupu kwa sasa:

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
})

Mwisho wa faili tusisahau kuhusu kuhamisha nje (export) reducer tuliyopata:

export default sellersSlice.reducer

Sasa inatubidi tufungue faili store.js katika folda app na tuingize reducer tuliyopata:

import sellersReducer from '../parts/sellers/sellersSlice'

Na kisha tumia katika configureStore kama reducer kwa sellers:

export default configureStore({
	reducer: {
		products: productsReducer,
		sellers: sellersReducer,
	},
})

Fungua programu yako ya wanafunzi. Unda folda nyingine teachers, hapa utakuwa na mafaili yenye msimbo, yanayohusu waalimu. Unda ndani yake faili teachersSlice.js. Kwa kutumia nyenzo za somo, unda ndani yake slice teachers kwa msaada wa createSlice.

Kila kitu kilicho na data cha mwalimu kiwe na sifa tatu: id, name (ambayo itakuwa na jina la ukoo na herufi za kwanza, kwa mfano 'Petrov A.V.') na somo (lolote unaloweza kufikiria - fizikia, hisabati, biolojia n.k). Fanya vitu 3 kama hivyo na waalimu kama thamani ya awali kwa slice.

Ingiza reducer uliyopata teachersReducer katika store.js na utumie kama reducer kwa teachers, kama inavyoonyeshwa kwenye somo.