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:

parts/sellers/sellersSlice.jsimport { 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:

sellers/sellersSlice.jsconst 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:

sellers/sellersSlice.jsconst sellersSlice = createSlice({
  name: 'sellers',
  initialState,
  reducers: {},
})

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

sellers/sellersSlice.jsexport default sellersSlice.reducer

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

app/store.jsimport sellersReducer from '../parts/sellers/sellersSlice'

Na kisha tumia katika configureStore kama reducer kwa sellers:

app/store.jsexport default configureStore({
  reducer: {
    products: productsReducer,
    sellers: sellersReducer,
  },
})