Menambahkan Slice Lainnya di Redux

Pada pelajaran sebelumnya, kita telah bekerja keras pada slice products untuk produk. Dalam aplikasi Redux nyata, state dapat memiliki banyak slice untuk berbagai tujuan. Oleh karena itu, dalam pelajaran ini kita akan menambahkan satu slice lagi ke state untuk penjual, yang pada dasarnya akan menambahkan produk dalam aplikasi kita.

Mari buka aplikasi produk kita dan hal pertama yang akan kita lakukan adalah di folder parts buat folder lain sellers, di sini kita akan menempatkan semua kode dan komponen yang berkaitan dengan penjual.

Sekarang, seperti halnya dengan produk, mari buat slice untuk penjual. Pertama, di folder sellers buat file sellersSlice.js dan impor createSlice ke dalamnya:

import { createSlice } from '@reduxjs/toolkit'

Kita lanjutkan langkah-langkah standar. Sebagai nilai awal untuk slice, mari buat empat penjual. Untuk kesederhanaan, mereka akan memiliki dua field - 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 ini, dengan menggunakan createSlice, buat slice sellers, berikan nilai awal kepadanya. Karena kita tidak akan menambahkan penjual, maupun memperbarui data mereka nantinya, maka biarkan field dengan reducer untuk saat ini tetap kosong:

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

Di akhir file, jangan lupa untuk mengekspor reducer yang dihasilkan:

export default sellersSlice.reducer

Sekarang kita perlu membuka file store.js di folder app dan impor reducer yang dihasilkan:

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

Kemudian tetapkan di configureStore sebagai reducer untuk sellers:

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

Buka aplikasi Anda dengan siswa. Buat folder lain teachers, di sini Anda akan memiliki file dengan kode yang berkaitan dengan guru. Buat file di dalamnya teachersSlice.js. Dengan menggunakan materi pelajaran, buat slice teachers di dalamnya menggunakan createSlice.

Biarkan setiap objek dengan data guru memiliki tiga properti: id, name (yang akan berisi nama belakang dan inisial, misalnya 'Petrov A.V.') dan mata pelajaran (apa saja yang Anda bisa pikirkan - fisika, matematika, biologi, dll.). Buat 3 objek guru tersebut sebagai nilai awal untuk slice.

Impor reducer yang dihasilkan teachersReducer ke dalam store.js dan tetapkan sebagai reducer untuk teachers, seperti yang ditunjukkan dalam pelajaran.