Redux-та тағы бір слайс қосу

Алдыңғы сабақтарда біз өнімдер үшін products слайсінде тығыз жұмыс істедік. Нақты Redux қолдануында әртүрлі мақсаттар үшін стейтте көптеген слайстер болуы мүмкін. Сондықтан бұл сабақта біз state-ке сатушылар үшін тағы бір слайс қосамыз, олар іс жүзінде біздің қолдануымызда өнімдерді қосатын болады.

Өнімдерімізбен қолдануымызды ашып, бірінші іс ретінде parts бумасында тағы бір sellers бумасын құрамыз, мұнда біз сатушыларға қатысты барлық код пен компоненттерді орналастырамыз.

Енді, өнімдердегідей, сатушылар үшін слайс құрайық. Алдымен sellers бумасында sellersSlice.js файлын құрып, оған createSlice импортын жасаймыз:

parts/sellers/sellersSlice.jsimport { createSlice } from '@reduxjs/toolkit'

Стандартты қадамдарды жасауды жалғастырамыз. Слайс үшін бастапқы мән ретінде төрт сатушыны құрайық. Қарапайымдылық үшін оларда екі өріс болсын - id және name:

sellers/sellersSlice.jsconst initialState = [
  { id: '0', name: 'Super Power' },
  { id: '1', name: 'Miracle Life' },
  { id: '2', name: 'Dolls&Toys' },
  { id: '3', name: 'Granny' },
]

Төменде createSlice көмегімен sellers слайсін құрамыз, оған бастапқы мәнін береміз. Біз болашақта сатушыларды қоспайтындықтан, не олардың деректерін жаңартпайтындықтан, редьюсерлер өрісі бізде бос қалсын:

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

Файлдың соңында алынған редьюсерді экспорттауды ұмытпайық:

sellers/sellersSlice.jsexport default sellersSlice.reducer

Енді бізге app бумасындағы store.js файлын ашып, алынған редьюсерді импорттау керек:

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

Содан кейін оны configureStore-та sellers үшін редьюсер ретінде тағайындау керек:

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