React.js 18 – Làm quen với Store, Actions, Reducer trong Redux

0
673

Làm quen với Store trong Redux

Store trong Redux nó giống như bộ não của con người vậy. Toàn bộ state của ứng dụng đều nằm trong store này.

Ví vậy để bắt đầu làm việc với redux, chúng ta nên tạo một store để lưu trữ state .

Trước tiên chúng ta sẽ tạo một thư mục với tên store ở trong store chúng ta sẽ tạo tệp mới với tên index.js và tiến hành khởi tạo store.

Như bạn có thể thấy ở đoạn mã trên, store là kết quả của createStore là một hàm được trong thư viện redux.

createStore nhận vào tham số là mộ bộ reducer trong ví dụ trên là rootReducer

Khái niệm quan trọng nhất ở đây là state trong redux xuất phát từ các bộ reducer có nghĩa là reducer là nơi sẽ tạo ra state cho ứng dụng của bạn.

 Làm quen với Reducer trong Redux

Reducer là một hàm javascript. Một reducer có hai tham số truyền vào bao gồm state hiện tại và actions .

Trong một component React , state cục bộ sẽ thay đổi tại chỗ khi sử dụng phương thức setSate. Trong Redux bạn không thể làm điều đó. Nguyên tắc thứ 3 của Redux nói rằng state là bất biến và không thể thay đổi tại chỗ.

Để tạo một hàm reducer không khó lắm. Đây chỉ là một hàm Javascript đơn giản với 2 tham số.

Trong ví dụ dưới đây, chúng tôi sẽ tạo ra một reducer đơn giản lấy initState làm tham số đầu tiên. Tham số thứ 2 tôi sẽ cung cấp cho nó actions. Và cuối cùng reducer sẽ trả về state ban đầu.

Tạo một thư mục với tên reducers

sau đó tạo một file mới với tên index.js trong thư mực reducers.

index.js

Làm quen với Actions

Reducer chắc chắn là khái niệm quan trọng nhất trong Redux. Nó sản xuất state của ứng dụng.

Nhưng là thế nào để một reducer biết khi nào sẽ tạo ra state tiếp theo.

Nguyên tắc thứ 2 của Redux cho biết cách duy nhất để thay đổi state là gửi các tín hiệu đến store. Tín hiệu này là một hành động (action). “Dispatching an action” là quá trình để gửi tín hiệu.

Bây giờ làm thế nào để thay đổi state bất biến. State là kết quả của một bản sao của state hiện tại và dữ liệu mới.

Điều đáng quan tâm ở đây là các hành động (action) redux là một đối tượng Javascript. Dưới đây là một hành động.


mỗi hành động (action) cần một thuộc tính type để mô tả cách thay đổi state.

Ngoài thuộc tính type bạn có thể chỉ định nhiều thuộc tính khác. Nhưng tốt hơn hết bạn nên chỉ định thêm một thuộc tính chứa dữ liệu mới là tốt nhất. Trong ví dụ trên payload là một bài viết mới. Một reducer sẽ thêm bài viết mới vào state khi nhận được hành động này.

Cách tốt nhất gửi hành động là gói nó lại trong một function. Function này chính là action creator.

Bây giờ hãy kết hợp tất cả lại với nhau để được một hành động Redux đơn giản.

Tạo một thư mục cho các hành động (action) với tên là actions

Sau đó tạo một file mới với tên index.js trong thư mục actions

index.js

Có thể thấy thuộc tính type không có gì khác là một chuỗi.

Reducer sẽ sử dụng chuỗi đó để xác định cách tính state tiếp theo.

Vì các chuỗi dễ bị lỗi chính tả và có thể sử dụng nhiều lần nên tốt hơn hết là các action type nên được khai báo là hằng số.

Tạo một thư mục mới với tên constants

Sau đó, tạo một file mới với tên action-type.js vào thư mục constants

action-type.js


Bây giờ hãy mở lại index.js trong thư mục actions và cập nhật để sử dụng action-type

 

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