Redux được ra đời do đâu?
Các ứng dụng single-page (SPA) yêu cầu sử dụng Javascript ngày càng phức tạp. Khi đó, code sẽ phải quản lý số lượng state nhiều hơn. Trong khi đó, với Redux thì state của ứng dụng đều được lưu giữ trong store. Và, mỗi component rất có thể access với bất kỳ state nào khi chúng muốn từ store này.
Thế nào là Redux?
Redux được định nghĩa là một predictable state management tool dành riêng cho các ứng dụng của Javascript. Redux sẽ hỗ trợ viết ứng dụng hoạt động một cách nhất quán, chạy trong môi trường khác nhau và dễ hơn khi test.
Redux được ra đời từ việc lấy cảm hứng bởi các tư tưởng ngôn ngữ Elm và kiến trúc Flux từ Facebook. Chình vì vậy, Redux luôn được sử dụng với mục đích kết hợp cùng với React.
Sơ đồ hoạt động của Redux
Các thành phần của Redux bao gồm:
Store: Store là loại lưu trạng thái ứng dụng (state) và là duy nhất trong bất kỳ ứng dụng Redux nào. Người dùng có thể access các state đã được lưu, update hoặc đăng ký cũng như hủy đăng ký các listeners thông qua helper methods.
Action: Khi ta định nghĩa các action, ta khai báo các tên của hành động trong ứng dụng. Action trong redux được định nghĩa là 1 plain object thuần túy. Nó sẽ bao gồm thuộc tính type (được hiểu như tên action đó) và payload (data kèm theo). Ngoài ra, ta có thể hiểu Actions là các events và chúng là cách cần thiết để gửi data từ app đến Redux store. Các data xuất hiện thông qua các tương tác của user, app, gọi API hoặc từ form submission.
Reducer: Reducers là những function dạng nguyên thủy và chúng thường lấy state hiện tại của app. Thực hiện một action rồi trả về dưới dạng một state mới. Các states này sẽ được lưu trữ như objects.
Dispatch: Khi cần dùng 1 action ở component, ta gọi action đó đơn giản bằng cách sử dụng phương thức dispatch.(gửi các action)
Tổ chức Redux trong project:
Ở đây mình sẽ làm ví dụ về redux và ko có xử lý bất đồng bộ call Api, nên nó sẽ có sơ đồ đơn giản như sau:
Cấu trúc thư mục
Chúng ta sẽ chia cấu trúc thư mục source code đơn giản như sau:
Cách tạo Action:
Tạo file actions/counter.js
Ở đây chúng ta tạo 1 function trả về action là 1 object thuần túy có type và payload (data kèm theo nếu có).
Cách tạo Reducer:
Tạo file reducer/counter.js
Ta sẽ cộng trừ payload đi kèm với action như đã nói ở trên. Case default để trả về chính state đó khi không có action tương ứng:
Tạo file reducers/index.js
App của ta thường sẽ có nhiều reducer nên ta phải gộp tất cả reducer lại để bỏ vào trong store. Ta sẽ sử dụng hàm combineReducer của redux để hợp nhất tất cả reducer thành 1 reducer có tên là rootReducers.
File index.js
Ta sử dụng hàm createStore để tạo store chứa rootReducers. Sau đó ta bọc component App bởi component của React Redux là Provider, nhờ đó tất cả component trong <App/> có thể truy cập được store.
File App.js
Giờ ta sẽ thực hiện gửi 1 action trong app thông qua các event click:
Mỗi lần ấn vào button Increase/ Decrease thì sẽ tăng/giảm counter 10 đơn vị, trong đó:
- Sử dụng useSelector của react-redux để lấy state counter từ store.
- Sử dụng useDispatch để trả về function dispatch, truyền increment và decrement vào dispatch để gọi 2 action này.
Kết quả:
Link Github cho ví dụ React Redux ở đây các bạn có thể tham khảo:
https://github.com/chungred/react-redux-example
