Reducer trong Redux

Ở bài học trước, chúng ta đã sử dụng hàm createSlice để tạo một slice cho sản phẩm products và một reducer sẽ cập nhật slice này, được lưu trữ trong store. Một lần nữa xin nhắc lại, rằng trong Redux, dữ liệu state được thay đổi bằng các reducer.

Cần nhớ rằng, reducer bị áp đặt một số hạn chế. Reducer chỉ cập nhật trạng thái dựa trên các giá trị nhận được của state hiện tại và đối tượng action, sau đó quyết định cách thay đổi state và trả về giá trị mới của nó.

Chúng ta biết rằng theo mặc định, các đối tượng và mảng trong JavaScript là có thể thay đổi (mutable). Chúng ta cũng biết rằng không được phép thay đổi state trực tiếp, trong trường hợp như vậy chỉ được làm việc với các bản sao. Reducer cũng phải tuân theo quy tắc này. Nhưng viết logic như vậy bằng tay có thể là một việc khá mệt mỏi và phức tạp, và ở đây, hàm createSlice sẽ giúp chúng ta, hàm này sử dụng thư viện Immer, chuyển đổi mã 'có thể thay đổi' của bạn thành 'không thể thay đổi'. Do đó, chỉ có thể "phạm tội" và đơn giản hóa cuộc sống khi sử dụng các hàm createSlice hoặc createReducer.

Các hạn chế của reducer cũng bao gồm việc sử dụng logic bất đồng bộ, tính toán các giá trị ngẫu nhiên và thực hiện các "side effect" khác. Và bây giờ, sau khi đã làm quen kỹ hơn với reducer, hãy quay lại ứng dụng sản phẩm của chúng ta.

Trong ứng dụng của chúng ta có một store, mà chúng ta đã tạo trong các bài học trước, nhưng hiện tại trong đó chưa có gì cả. Hãy mở tệp store.js và thêm một chút mã vào đó. Đầu tiên, hãy import hàm reducer cho sản phẩm vào đó:

Bây giờ, chúng ta có thể chỉ định hàm đã import productsReducer làm reducer:

Với dòng mã trên, chúng ta đang nói với store của mình rằng bây giờ khi một action xảy ra, tất cả dữ liệu cho slice state.products sẽ được cập nhật bởi reducer productsReducer.

Bây giờ bạn có thể chạy ứng dụng (lưu ý rằng cảnh báo về reducer không hợp lệ đã biến mất khỏi bảng điều khiển!), mở Redux DevTools trong trình duyệt và khám phá các tab của nó. Ví dụ, bằng cách nhấp vào tab State trong tab Inspector, chúng ta có thể thấy hai đối tượng sản phẩm của mình, được hiển thị dưới dạng giá trị state ban đầu khi ứng dụng được khởi chạy lần đầu tiên. Trong tab Log monitor, chúng ta thấy các slice mà state toàn cục có - đó là slice products, bao gồm hai đối tượng. Cũng hãy xem qua tab Chart.