Menambah Satu Lagi Slice dalam Redux

Dalam pelajaran sebelumnya, kami telah bekerja keras pada slice products untuk produk. Dalam aplikasi Redux sebenar, state boleh mengandungi banyak slice untuk pelbagai tujuan. Oleh itu, dalam pelajaran ini kami akan menambah satu lagi slice ke dalam state untuk penjual, yang sebenarnya akan menambah produk dalam aplikasi kami.

Buka aplikasi kami dengan produk dan perkara pertama yang akan kami lakukan ialah dalam folder parts buat satu lagi folder sellers, di sini kami akan meletakkan semua kod dan komponen yang berkaitan dengan penjual.

Sekarang, sama seperti dengan produk, mari kita buat slice untuk penjual. Sebagai permulaan, dalam folder sellers buat fail sellersSlice.js dan import createSlice ke dalamnya:

import { createSlice } from '@reduxjs/toolkit'

Kami teruskan langkah-langkah standard. Sebagai nilai permulaan untuk slice, mari buat empat penjual. Untuk kesederhanaan, mereka akan mempunyai dua medan - id dan name:

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

Di bawah dengan menggunakan createSlice buat slice sellers, berikan nilai permulaan kepadanya. Oleh kerana kami tidak akan menambah penjual, atau mengemas kini data mereka pada masa hadapan, biarkan medan dengan reducer kami kekal kosong buat masa ini:

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

Di akhir fail, jangan lupa tentang eksport reducer yang diperoleh:

export default sellersSlice.reducer

Sekarang kami perlu membuka fail store.js dalam folder app dan import reducer yang diperoleh:

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

Dan kemudian tetapkan dalam configureStore sebagai reducer untuk sellers:

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

Buka aplikasi anda dengan pelajar. Buat satu lagi folder teachers, di sini anda akan mempunyai fail dengan kod, berkaitan dengan guru. Buat fail di dalamnya teachersSlice.js. Menggunakan bahan pelajaran, buat slice teachers di dalamnya menggunakan createSlice.

Biarkan setiap objek dengan data guru mempunyai tiga sifat: id, name (yang akan mengandungi nama keluarga dan inisial, contohnya 'Petrov A.V.') dan subjek (apa sahaja yang anda fikirkan - fizik, matematik, biologi, dll.). Buat 3 objek sedemikian dengan guru sebagai nilai permulaan untuk slice.

Import reducer yang diperoleh teachersReducer ke dalam store.js dan tetapkannya sebagai reducer untuk teachers, seperti yang ditunjukkan dalam pelajaran.