Thêm slice vào Redux

Chúng ta đã chuẩn bị các công cụ cơ bản để tạo ứng dụng Redux, bây giờ chúng ta có thể chuyển trực tiếp sang việc triển khai các thành phần của nó.

Trong bài học này, chúng ta sẽ bắt đầu với khái niệm slice (slices). Ứng dụng Redux có một trạng thái toàn cục được lưu trữ trong store. Trạng thái này được chia nhỏ thành các slice. Trên thực tế, slice là một phần của store, chứa trạng thái ban đầu, logic reducer và action cho một phần cụ thể của ứng dụng.

Ứng dụng của chúng ta sẽ có sản phẩm, do đó slice đầu tiên mà chúng ta tạo sẽ chứa thông tin về sản phẩm. Khi tạo slice cũng cần thêm reducer biết cách xử lý thông tin này.

Hãy vào thư mục src và tạo thư mục parts, sau đó trong đó tạo thư mục products - chúng ta sẽ đặt tất cả các tệp mã liên quan đến sản phẩm vào đây. Trong thư mục products, chúng ta sẽ tạo tệp productsSlice.js, sau đó import vào đó từ RTK hàm createSlice, dùng để tạo các slice:

import { createSlice } from '@reduxjs/toolkit'

Bây giờ hãy tạo slice cho sản phẩm và đặt tên là 'products'. Đối với thuộc tính reducers, chúng ta sẽ để dấu ngoặc nhọn trống:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {}
})

Chúng ta cũng cần xác định initialState - trạng thái ban đầu của slice trạng thái, sẽ được tải khi ứng dụng khởi chạy lần đầu. Hãy viết nó ngay sau import và trước khi tạo slice. Hãy để đó là một mảng gồm một vài đối tượng chứa dữ liệu sản phẩm. Chỉ định cho mỗi sản phẩm id, tiêu đề, mô tả, giá và số lượng:

const initialState = [
	{
		id: '1',
		title: 'Product1',
		desc: 'This is an amazing product',
		price: '300',
		amount: '30',
	},
	{
		id: '2',
		title: 'Product2',
		desc: 'This is a nice product',
		price: '700',
		amount: '12',
	},
]

Ở cuối mã của tệp, chúng ta sẽ lấy từ kết quả của hàm createSlice reducer được tạo ra bởi nó và export. Nó sẽ hữu ích cho chúng ta trong các tệp khác của ứng dụng:

export default productsSlice.reducer

Mở ứng dụng của bạn dành cho sinh viên. Tạo trong đó tệp studentsSlice.js, như được mô tả trong bài học. Tạo trong đó với sự trợ giúp của createSlice slice students. Với tư cách là giá trị ban đầu của slice, hãy để bạn có một mảng gồm một vài đối tượng chứa dữ liệu sinh viên.

Với mỗi sinh viên, tạo các trường: id, tên, họ, tuổi và chuyên ngành.

Ở cuối tệp studentsSlice.js export reducer đã nhận được, như được mô tả trong bài học.