1. Redux là gì?
Redux là một thư viện quản lý State (trạng thái) toàn cục mã nguồn mở và chạy ở phía client. Trước đây khi chưa có redux thì chúng ta thường phải truyền dữ liệu từ các component cha đến các component con. Khi dự án của bạn ngày càng lớn, việc quản lý việc truyền dữ liệu từ các component cha đến các component con có thể trở nên khó khăn. Trong kiến trúc truyền thống, bạn phải điều phối việc truyền dữ liệu qua nhiều tầng của ứng dụng, từ component cha đến component con, và đôi khi dẫn đến việc truyền dữ liệu qua nhiều component trung gian không cần thiết. Chính vì thế mà redux được ra đời nhằm giải quyết các vấn đề này.
3. Khi nào nên sử dụng Redux?
- State được truyền dưới dạng prop nhiều hơn hai component hoặc các cấp độ của các component.
- Cùng một state được sử dụng bởi các component không có mối quan hệ cha-con.
- Lưu trữ tạm state trang. Ví dụ – khi người dùng điều chỉnh trang tin tức và quay lại trang tin tức cũ, trang tin tức cũ vẫn hoạt động ở trạng thái như ban đầu.
- Khi state thay đổi, các component liên quan đến state có thể được thay đổi đồng thời.
- State có thể sử dụng được ở nhiều nơi.
4. Kiến trúc của Redux?
Redux bao gồm 3 thành phần chính là :
- Action
- Reducer
- Store
Action
Action là một object đơn giản trả về một đối tượng và có trách nhiệm gửi dữ liệu đến kho lưu trữ (store) thông qua hàm dispatch và reducer.
Nó có 2 thuộc tính – payload và type trong đó:
- Type : Tên hành động
- Payload (Có thể là data): Đây là thông tin cần thiết để thực hiện hành động. Tóm lại, payload có thể là bất kỳ dữ liệu nào cần thiết để cập nhật trạng thái của ứng dụng
Ví dụ:
const addItemAction = {
type: 'ADD_ITEM',
payload: {
name: 'Milk',
quantity: 1
}
}
dispatch(addItemAction);Reducer
“Reducer” là hàm biến đổi state cũ sang state mới. Hàm nhận vào hai đôi số: trạng thái hiện tại và action, và trả về một trạng thái mới.
Ví dụ:
// Định nghĩa reducer để xử lý các action liên quan đến số lượng
const counterReducer = (state = initialState, action) => {
switch(action.type) {
case 'INCREMENT':
return {
...state,
count: state.count + 1
};
case 'DECREMENT':
return {
...state,
count: state.count - 1
};
default:
return state;
}
}Store
Store là một kho lưu trữ các trạng thái của component và có thể truy cập từ toàn bộ ứng dụng.
Ví dụ:
import { createStore } from 'redux';
// Step 1: Define a reducer
// A pure js function
// that transform the old state to the new one
// based on the action.type
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
// Step 2: Init your store with the reducer
// Its API is { subscribe, dispatch, getState }.
const store = createStore(counter);
// Step 3: Subscribe to state changes to update UI
store.subscribe(() => console.log(store.getState()))
// Step 4: Dispatch action to update redux state
// The only way to mutate the internal state is to dispatch an action.
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'DECREMENT' })- dispatch(action): Gửi một action đến Redux store để xử lý.
- getState(): Trả về state hiện tại của Redux store.
- subscribe(listener): Đăng ký một hàm lắng nghe để được gọi mỗi khi state của Redux thay đổi.
5. Kết luận
Thông qua bài viết này tôi mong rằng bài viết của mình có thể giúp cho mọi người hiểu thêm về redux và sử dụng nó một cách hiệu quả (bài viết này chỉ là chia sẻ của cá nhân tôi thông qua quá trình tìm hiểu và học hỏi nên không tránh những sai sót).
Một số note cho các bạn nhé :
- Redux sử dụng kiến trúc 1 chiều: uni-directional data flow
- Redux chỉ dùng 1 store duy nhất làm Single Source of Truth
- Redux state là READ-ONLY. Muốn update phải dispatch một action (js object)
- Những thay đổi của redux state được thực hiện bởi Pure functions (reducer)
- Redux có thể dùng cho các javascript apps, không chỉ riêng gì ReactJS.
6. Link tham khảo
[1]: https://redux.js.org/introduction/getting-started
[2]: https://topdev.vn/blog/redux-la-gi/
