Redux Tool Kit (RTK) là một thư viện giúp cho chúng ta viết Redux tốt hơn, dễ hơn và đơn giản hơn. Bài viết này mình sẽ trình bày một số ưu điểm về Redux toolkit.
Ba vấn đề làm nền tảng ra đời RTK:
- Configuring a Redux store is too complicated. (Cấu hình store quá phức tạp)
- I have to add a lot of packages to get Redux to do anything useful. (Cần thêm nhiều packages để Redux làm được nhiều thứ hữu ích)
- Redux requires too much boilerplate code. (Redux yêu cầu quá nhiều đoạn code viết sẵn)Redux đã có những tính năng hay sau đây:
configureStore()
Thường để xử lý bất đồng bộ thì chúng ta thêm các middleware để call Api như Redux Thunk, Redux Saga thì với RTK đã tích hợp sẵn luôn.
Khi chưa có Redux Toolkit, chúng ta cấu hình 1 Redux store khá là dài dòng:
Ở đây chúng có thấy khuyến cáo sử dụng Redux Toolkit:
Sau khi đổi sang RTK, source code ngắn gọn hơn:
Thay vì chỉ khởi tạo một store đơn thuần, configureStore sẽ mặc định thiết lập cho phép sử dụng redux devtool để debug và theo dõi quá trình cập nhật state cũng như thiết lập sẵn một số middleware.
createAction()
Lúc trước chúng ta tạo Action cần function Javascript trả về Plain Object:
Giờ chúng ta có thể viết gọn hơn với RTK:
Đầu tiên thì createAction giúp ta khởi tạo action một cách ngắn gọn hơn với việc tạo action bằng javascript function đơn thuần. Ngoài ra, ở ví dụ trên ta không hề khai báo trước giá trị type của action mà truyền trực tiếp string vào làm tham số, createAction cung cấp sẵn khả năng truy xuất type của action rồi
createReducer()
Khi chưa có RTK thì khi trả về state trong reducer chúng ta phải dùng switch…case để trả về state tương ứng:
Sau khi có RTK, code sẽ ngắn gọn hơn:
– Mỗi key increment hay decrement là 1 case, ko cần default case
– Một điểm hay nữa RTK cho phép mutate trực tiếp data trong reducer (thực chất họ dùng Immer.js)
createSlice()
Khi Redux store có nhiều state riêng biệt thì chúng ta phải viết nhiều file và gom chúng như sau:
Để viết gọn hơn và dễ quản lý, chúng ta có thể sử dụng createSlice:
Một số ưu điểm của cách viết này:
- Không còn tạo riêng các file action, reducer, type
- action types tự động sinh ra kèm tiền tố mặc định là trường name (tên action sẽ là: “counter/increment” và “counter/decrement”)
- Cú pháp hoàn chỉnh, ngắn gọn và theo 1 template logic nhất quán của redux.
Ngoài ra vẫn còn một số api khác như createListenerMiddleware, createAsyncThunk(),… các bạn có thể tham khảo doc và GitHub của Redux Toolkit:
https://redux-toolkit.js.org/introduction/getting-started
https://github.com/reduxjs/redux-toolkit
