Thay đổi cấu trúc state trong Redux

Giai đoạn đầu tiên mà chúng ta sẽ triển khai để tương tác ứng dụng Redux của mình với một máy chủ bên ngoài nào đó - đó là lấy dữ liệu được lưu trữ trên đó khi khởi chạy ứng dụng. Nhưng trước tiên hãy đưa vào ứng dụng của chúng ta một số thay đổi.

Hãy mở ứng dụng sản phẩm của chúng ta, và trong đó là tệp productsSlice.js. Hãy chú ý đến định nghĩa initialState. Ban đầu slice của chúng ta với sản phẩm productsSlice - là một mảng, trong đó có các đối tượng (trong trường hợp của chúng ta có hai) với dữ liệu sản phẩm. Thứ nhất, vì bây giờ chúng ta sẽ tải chúng từ máy chủ, nên chúng ta cần loại bỏ chúng khỏi initialState. Thứ hai, chúng ta sẽ gửi đến máy chủ các yêu cầu API và sẽ rất quan trọng để biết về trạng thái của chúng. Cân nhắc hai điều này, hãy sửa đổi initialState. Bây giờ hãy để nó chỉ là một đối tượng với các trường products (ban đầu ở đây sẽ không có dữ liệu nào, mà chỉ là một mảng trống), status và error. Bây giờ mã của chúng ta cho initialState sẽ trở thành ngắn hơn một chút:

const initialState = {
	products: [],
	status: 'idle',
	error: null,
}

Hiện tại chúng ta đã đặt trạng thái là 'idle' (không hoạt động), bởi vì ban đầu chúng ta không gửi bất kỳ yêu cầu nào, và nói chung nó sẽ thay đổi và có thể nhận các giá trị 'loading', 'succeeded', 'failed'. Hãy nhớ rằng để biểu thị trạng thái, bạn có thể chọn những tên mà sẽ thuận tiện cho bạn.

Cuộn xuống dưới theo mã. Tiếp theo sau sự thay đổi initialState, chúng ta nên thay đổi cả mã, trong đó chúng ta làm việc với state này trong các hàm reducer. Hãy xem mã cho productAdded:

state.push(action.payload)

Bây giờ các sản phẩm mới chúng ta sẽ đặt không chỉ đơn giản vào state cho sản phẩm, mà vào thuộc tính state.products của nó. Do đó, hãy thay thế dòng được chỉ ra ở trên bằng:

state.products.push(action.payload)

Tương ứng, hãy thực hiện những thay đổi tương tự cho reducer reactionClicked. Thay vì:

const currentProduct = state.find((product) => product.id === productId)

Bây giờ sẽ là:

const currentProduct = state.products.find((product) => product.id === productId)

Hãy tự thay thế state bằng state.products và trong mã của reducer productUpdated.

Hãy mở ứng dụng sinh viên của bạn. Mở trong đó tệp studentsSlice.js. Bây giờ hãy để initialState của bạn có ba thuộc tính: students, status, error - hãy sửa đổi nó, như được hiển thị trong bài học.

Hãy thực hiện các thay đổi tương ứng và trong mã bên dưới. Thay thế state bằng state.students trong mã cho ba hàm reducer của bạn.