Thêm một slice nữa vào Redux

Trong các buổi học trước, chúng ta đã làm việc chăm chỉ với slice products cho sản phẩm. Trong một ứng dụng Redux thực tế, state có thể có nhiều slice cho các mục đích khác nhau. Vì vậy, trong bài học này chúng ta sẽ thêm vào state một slice nữa cho người bán, những người thực tế sẽ thêm sản phẩm trong ứng dụng của chúng ta.

Hãy mở ứng dụng sản phẩm của chúng ta và điều đầu tiên chúng ta làm là trong thư mục parts tạo một thư mục nữa sellers, ở đây chúng ta sẽ đặt toàn bộ mã và các component, liên quan đến người bán.

Bây giờ, giống như trường hợp với sản phẩm, hãy tạo một slice cho người bán. Đầu tiên, trong thư mục sellers tạo tệp sellersSlice.js và import vào đó createSlice:

import { createSlice } from '@reduxjs/toolkit'

Chúng ta tiếp tục các bước tiêu chuẩn. Làm giá trị ban đầu cho slice, hãy tạo bốn người bán. Để đơn giản, họ sẽ có hai trường - id và name:

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

Bên dưới, sử dụng createSlice tạo slice sellers, truyền cho nó giá trị ban đầu. Vì chúng ta sẽ không thêm người bán, cũng không cập nhật dữ liệu của họ sau này, nên hãy để trường reducers của chúng ta tạm thời để trống:

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

Ở cuối tệp, đừng quên export reducer thu được:

export default sellersSlice.reducer

Bây giờ chúng ta cần mở tệp store.js trong thư mục app và import reducer đã tạo:

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

Và sau đó chỉ định nó trong configureStore làm reducer cho sellers:

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

Hãy mở ứng dụng sinh viên của bạn. Tạo một thư mục nữa teachers, ở đây bạn sẽ có các tệp mã liên quan đến giảng viên. Tạo trong đó một tệp teachersSlice.js. Sử dụng tài liệu bài học, tạo trong đó slice teachers bằng createSlice.

Hãy để mỗi đối tượng với dữ liệu giáo viên của bạn có ba thuộc tính: id, name (sẽ chứa họ và tên đệm, ví dụ 'Petrov A.V.') và môn học (bất kỳ môn nào bạn nghĩ ra - vật lý, toán học, sinh học, v.v.). Tạo 3 đối tượng như vậy với giáo viên làm giá trị ban đầu cho slice.

Import reducer thu được teachersReducer vào store.js và chỉ định nó làm reducer cho teachers, như đã trình bày trong bài học.