Thay thế Redux với React Hooks

Ngoài những hook cơ bản như là useState , useEffect thì Hook còn cung cấp cho chúng ta 3 hook có thể kết hợp với nhau để có chức năng giống như là Redux:

useContext

Với những ai đã từng làm việc với React.Context thì nó cho phép chúng ta truyền state đến component cao nhất trong component tree rồi từ đó ta có thể chia sẻ state đó đến những component khác trong cùng component tree.

Tuy nhiên nếu phải sử dụng nhiều context thì sẽ là 1 vấn đề lớn và do đó useContext ra đời để giúp chúng ta giảm bớt vấn đề này.

Đầu tiên chúng ta định nghĩ 1 context

Sau đó bao bọc toàn bộ phần DOM bằng thẻ Provider và truyển giá trị mà bạn muốn chia sẻ đến các component khác:

Như vậy trong componet Navbar hoặc Messages, chúng ta có thể dụng được username như sau:

useReducer

Một cái term khá quen thuộc nếu dùng Redux vì vậy nhiệm vụ của nó giống với Reducer trong Redux là để tạo ra state mới cho component.

Đầu tiên cần định nghĩ một function là myReducer

Chúng ta sẽ sử dụng useReducer với tham số là myReducer và 1 initial state.

Và cuối cùng, chúng ta có thể sử dụng state đó để hiển thị các giá trị khác, đồng thời chúng ta cũng có thể sử dụng dispatch để thay đổi giá trị của state:

Dispatch action

Hàm useDispatch() hoàn toàn giống với hàm dispatch ở trong Redux store. Thêm nó như sau

Thêm các action này vào UI để trigger.

Kết thúc

Các bạn nên sử dụng cách này với Redux sẽ giảm được khá nhiều thời gian code đó. Cảm ơn các bạn đã đón đọc.

Nếu bạn là một  ReactJS Developer, ưa thích làm sản phẩm quốc tế trong lĩnh vực bán lẻ - thương mại điện tử! Tham gia Tuyển dụng ReactJS Developer, môi trường làm việc từ xa, địa điểm tự do, quản lý linh hoạt theo Agile.