React.js 19 – Tái cấu trúc Reducer

0
1126

Trước khi đi vào bài hướng dẫn này , chúng ta hãy tóm tắt lại các khái niệm chính trong Redux.

  • Các store Redux giống như bộ não con người, phụ trách các các bộ phận hoạt động trong Redux.
  • Các state của ứng dụng đang hoạt động như các đối tượng đơn bất biến trong store.
  • Khi store nhận được một action nó sẽ kích hoạt reducer.
  • Reducer trả về state tiếp theo

Reducer được làm bằng gì ?

Reducer là một hàm javascript có 2 tham số là state và action . Reducer có thể sự dụng switch hoặc if để xử lý mọi hành động.

Reducer tính toán state tiếp theo tùy thuộc vào action-type. Hơn nữa, nó sẽ trả về ít nhất là state ban đầu khi không có hành động nào khớp.

Khi action-type khớp với các mệnh đề hợp lệ, reducer sẽ tính toán state tiếp theo và trả về một đối tượng mới.

Ở bài trước reducer mà chúng ta tạo ra không làm gì cả mà chỉ là trả về state ban đầu. Bây giờ hãy cập nhật nó lại.

Mở reducers/index.js và cập nhật reducer như sau.

Có thể đoạn mã trên là hợp lệ, nhưng nó đã phá vỡ nguyên tắc trong Redux là tính bất biến của state.

Array.prototype.push() là một hàm sẽ làm thay đổi mảng ban đầu. Bạn có nhớ tới nguyên tắc thứ 3 không? State là bất biến và không thể thay đổi tại chỗ. Thay vào đó trong reducer , nó đang thay đổi giá trị ban đầu.

Chúng ta sẽ cần sửa một chút. Đầu tiên chúng ta có thể trả về một state mới , tức là một đối tượng javascript mới với Object.assign .Bằng cách này chúng ta sẽ giữ được state ban đầu là bất biến. Sau đó chúng ta có thể sử dụng Array.prototype.concat  thay cho Array.prototype.push để giữ cho mảng ban đầu không thay đổi.

Trong ví dụ trên, state ban đầu hoàn toàn không bị ảnh hưởng. Mảng posts ban đầu không thay đổi tại chỗ.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây