# Redux truyền thống và Redux Toolkit trong ReactJS ## 1. Giới thiệu `Redux` là một thư viện quản lý trạng thái của ứng dụng, giúp quản lý trạng thái của ứng dụng một cách dễ dàng và hiệu quả. Tất cả các state ứng dụng đều được lưu trữ trong một store duy nhất, nó dễ dàng cập nhật bằng các `action` giống như `useReducer`. Về mặt khái niệm nó tương đương với việc sử dụng `Context API` + `useReducer`. Có 2 phiên bản của Redux: `Redux Toolkit` (phiên bản mới) và `Classic Redux` (phiên bản cũ). `Redux Toolkit` là một bộ công cụ giúp việc sử dụng `Redux` trở nên dễ dàng hơn, giúp giảm thiểu việc viết code lặp đi lặp lại. ## 2. Cơ chế hoạt động của Redux 1. Từ event handler trong component 2. Hàm tạo hành động (Action Creator) 3. Dispatch, gửi action đến store 4. Store chứa nhiều reducer 5. Reducer xử lý action 6. Store cập nhật state 7. Component nhận state mới 8. Render lại component. ## 3. Classic Redux ### 3.1. Cài đặt Classic Redux ```bash $ npm install redux ``` Nếu sử dụng Redux Thunk (middleware) dùng để thực hiện các tác vụ bất đồng bộ) ```bash $ npm install redux-thunk ``` ### 3.2. Sử dụng Classic Redux Thư viện `redux` cung cấp 3 hàm chính: - **createStore**: tạo store - **combineReducers**: kết hợp nhiều reducer lại với nhau - **applyMiddleware**: sử dụng middleware trong Redux để thực hiện các tác vụ trước khi nạp vào store. (async, log, ...) - `Redux Thunk` #### 3.2.1. Sử dụng `createStore` và `combineReducers` để tạo `store` Chúng ta sẽ khởi tạo các `reducer`, cách viết giống như `useReducer` trong React. 1. Đầu tiên, chúng ta xác định các trạng thái ban đầu (initial state) của ứng dụng. 2. Tiếp theo, chúng ta sẽ viết các `reducer` để xử lý các `action` được gửi đến từ `dispatch`. LƯU Ý: TÊN CỦA ACTION NÊN VIẾT THEO CHUẨN `domain/action`. 3. Cứ như vậy, lặp lại cho các `reducer` khác. 4. Cuối cùng, chúng ta sẽ kết hợp các `reducer` lại với nhau bằng `combineReducers`. 5. Chúng ta sẽ tạo `store` bằng `createStore` và truyền vào `rootReducer` sau khi đã kết hợp các `reducer`. LƯU Ý, NẾU TRONG ACTION CÓ THỰC HIỆN CÁC TÁC VỤ BẤT ĐỒNG BỘ, CHÚNG TA CẦN SỬ DỤNG MIDDLEWARE NHƯ `REDUX THUNK`. 6. Sử dụng `store.dispatch` để gửi `action` đến `reducer`. Ví dụ, chúng ta sẽ tạo 2 `reducer` là `accountReducer` và `customerReducer` và kết hợp chúng lại với nhau bằng `combineReducers`. Sau đó tạo `store` bằng `createStore` và sử dụng nó ở bất kỳ component nào trong ứng dụng. > Tạo reducer `accountSlice.js` ```js /** 1. Đầu tiên, chúng ta xác định các trạng thái ban đầu (initial state) của ứng dụng. */ // Store lưu trữ tất cả state của ứng dụng, và cung cấp các phương thức để thay đổi state const initialState = { balance: 0, loan: 0, loanPurpose: "", isLoading: false, }; // state mặc định của ứng dụng /** 2. Tiếp theo, chúng ta sẽ viết các `reducer` để xử lý các `action` được gửi đến từ `dispatch`. */ export default function accountReducer(state = initialState, action) { switch (action.type) { case "account/convertCurrency": return { ...state, isLoading: true }; case "account/deposit": return { ...state, balance: state.balance + action.payload, isLoading: false, }; case "account/withdraw": return { ...state, balance: state.balance - action.payload }; case "account/requestLoan": if (state.loan > 0) return state; return { ...state, loan: action.payload.amount, loanPurpose: action.payload.purpose, balance: state.balance + action.payload.amount, }; case "account/payLoan": return { ...state, loan: 0, loanPurpose: "", balance: state.balance - state.loan, }; default: return state; } } // reducer là một hàm nhận vào state và action, trả về state mới sau khi thay đổi // Các action để thay đổi state export function deposit(amount, currency) { if (currency === "USD") { return { type: "account/deposit", payload: amount, }; } // Trả về một hàm nhận vào dispatch để thực hiện các action không đồng bộ (Sử dụng Redux Thunk) return async (dispatch) => { try { dispatch({ type: "account/convertCurrency" }); // Thực hiện action convertCurrency để báo cho store là đang thực hiện chuyển đổi tiền tệ const res = await fetch( `https://api.frankfurter.app/latest?amount=${amount}&from=${currency}&to=USD` ); // Gọi API để chuyển đổi tiền tệ if (!res.ok) throw new Error("Failed to convert currency."); // Nếu gọi API không thành công thì throw error const data = await res.json(); // Lấy dữ liệu từ API dispatch({ type: "account/deposit", payload: data["rates"]["USD"] }); // Thực hiện action deposit với giá trị chuyển đổi từ tiền tệ sang USD sau khi gọi API thành công } catch (error) { console.error(error); } }; } // Action dùng để rút tiền export function withdraw(amount) { return { type: "account/withdraw", payload: amount, }; } // Action dùng để vay tiền export function requestLoan(amount, purpose) { return { type: "account/requestLoan", payload: { amount, purpose, }, }; } // Action dùng để trả nợ export function payLoan() { return { type: "account/payLoan", }; } ``` > Tạo reducer `customerSlice.js` ```js /** 1. Đầu tiên, chúng ta xác định các trạng thái ban đầu (initial state) của ứng dụng. */ // Store lưu trữ tất cả state của ứng dụng, và cung cấp các phương thức để thay đổi state const initialState = { fullName: "", nationalId: "", createdAt: "", }; // state mặc định của ứng dụng /** 2. Tiếp theo, chúng ta sẽ viết các `reducer` để xử lý các `action` được gửi đến từ `dispatch`. */ export default function customerReducer(state = initialState, action) { switch (action.type) { case "customer/create": return { ...state, fullName: action.payload.fullName, nationalId: action.payload.nationalId, createdAt: action.payload.createdAt, }; case "customer/updateName": return { ...state, fullName: action.payload }; default: return state; } } // reducer là một hàm nhận vào state và action, trả về state mới sau khi thay đổi // Action dùng để tạo mới một khách hàng export function create(fullName, nationalId) { return { type: "customer/create", payload: { fullName, nationalId, createdAt: new Date().toISOString(), }, }; } // Action dùng để cập nhật tên khách hàng export function updateName(fullName) { return { type: "account/withdraw", payload: fullName, }; } ``` > Kết hợp các reducer lại với nhau và tạo store `store.js` ```js import { createStore, combineReducers, applyMiddleware } from "redux"; import thunk from "redux-thunk"; import accountReducer from "./feature/accountSlice"; // import Reducer từ file accountSlice.js import customerReducer from "./feature/customerSlice"; // import Reducer từ file customerSlice.js /** 4. Cuối cùng, chúng ta sẽ kết hợp các `reducer` lại với nhau bằng `combineReducers`. */ const rootReducer = combineReducers({ account: accountReducer, // Tạo reducer account với hàm reducer của accountReducer customer: customerReducer, // Tạo reducer customer với hàm reducer của customerReducer }); // kết hợp các reducer lại với nhau // 5. Tạo `store` bằng `createStore` và truyền vào `rootReducer` sau khi đã kết hợp các `reducer`. const store = createStore(rootReducer, applyMiddleware(thunk)); // tạo store với rootReducer và sử dụng middleware Redux Thunk (Do trong action deposit có thực hiện các tác vụ bất đồng bộ) export default store; ``` > Sử dụng store trong bất kỳ component nào trong ứng dụng ```js /** Import các action đã tạo từ accountSlice.js và customerSlice.js */ import { deposit, withdraw, requestLoan, payLoan } from "./feature/accountSlice"; import { create, updateName } from "./feature/customerSlice"; /** Import store từ file store.js */ import store from "./store"; /** Sử dụng store trong component */ ... store.dispatch(deposit(100, "USD")); // Gửi action deposit với giá trị 100 và tiền tệ là USD (account/deposit) store.dispatch(withdraw(50)); // Gửi action withdraw với giá trị 50 (account/withdraw) store.dispatch(requestLoan(1000, "Buy a new car")); // Gửi action requestLoan với giá trị 1000 và mục đích là Buy a new car (account/requestLoan) store.dispatch(payLoan()); // Gửi action payLoan (account/payLoan) store.dispatch(create("John Doe", "123456789")); // Gửi action create với tên là John Doe và số chứng minh nhân dân là 123456789 (customer/create) store.dispatch(updateName("Jane Doe")); // Gửi action updateName với tên là Jane Doe (customer/updateName) ... // Nếu không tạo ra các hàm action, chúng ta cũng có thể gửi action trực tiếp như sau store.dispatch({type: 'account/withdraw', payload: 100}); // Gửi action withdraw với giá trị 100 ``` #### 3.2.2. Sử dụng `applyMiddleware` để sử dụng `Redux Thunk` **Middleware** là một cơ chế cho phép chúng ta mở rộng chức năng của Redux. **Middleware** có thể được sử dụng để thực hiện các chức năng như ghi log, gửi dữ liệu, thực hiện các tác vụ bất đồng bộ, fetch dữ liệu từ server, ... Vì không thể thực hiện các tác vụ bất đồng bộ trong reducer, nên chúng ta cần sử dụng **middleware**. **Middleware** nằm giữa dispatch action và reducer, nó có thể thực hiện các tác vụ trước khi được nạp vào **store** Như vậy sau khi dispatch action, action sẽ đi qua **middleware** được thực hiện bằng **Redux Thunk** trước khi nạp vào **store** để thực hiện **reducer** và cập nhật **state**. **Redux Thunk** là một middleware cho phép chúng ta viết các action creator trả về một hàm thay vì một object, trong hàm này có thể thực hiện các tác vụ bất đồng bộ cuối cùng gọi dispatch để gửi action đến reducer. Nếu trong action có thực hiện các tác vụ bất đồng bộ như kiểu gọi API, chúng ta cần sử dụng `Redux Thunk` để thực hiện các tác vụ đó, bằng cách sử dụng `applyMiddleware` và `thunk`. Hàm action này có đặc điểm là trả về một hàm nhận vào `dispatch` để thực hiện các action không đồng bộ. Cuối cùng hàm sẽ `return` về một `async function` với tham số là `dispatch` để thực hiện các action không đồng bộ. Lưu ý, `type` của action cần phải là `domain/action`. Sau đó, ở trong hàm `createStore`, chúng ta sẽ truyền vào `applyMiddleware(thunk)` để sử dụng `Redux Thunk`. Với `thunk` được import từ `redux-thunk`. Nếu chưa cài đặt `redux-thunk`, chúng ta cần cài đặt nó bằng lệnh sau: ```bash $ npm install redux-thunk ``` > Ví dụ, action `account/deposit` trong `accountSlice.js` ```js // Các action để thay đổi state export function deposit(amount, currency) { if (currency === "USD") { return { type: "account/deposit", payload: amount, }; } /** Redux Thunk */ // Trả về một hàm nhận vào dispatch để thực hiện các action không đồng bộ (Sử dụng Redux Thunk) return async (dispatch) => { try { dispatch({ type: "account/convertCurrency" }); // Thực hiện action convertCurrency để báo cho store là đang thực hiện chuyển đổi tiền tệ const res = await fetch( `https://api.frankfurter.app/latest?amount=${amount}&from=${currency}&to=USD` ); // Gọi API để chuyển đổi tiền tệ if (!res.ok) throw new Error("Failed to convert currency."); // Nếu gọi API không thành công thì throw error const data = await res.json(); // Lấy dữ liệu từ API dispatch({ type: "account/deposit", payload: data["rates"]["USD"] }); // Thực hiện action deposit với giá trị chuyển đổi từ tiền tệ sang USD sau khi gọi API thành công } catch (error) { console.error(error); } }; } ``` > Tạo store `store.js` ```js import { createStore, combineReducers, applyMiddleware } from "redux"; import thunk from "redux-thunk"; const store = createStore(rootReducer, applyMiddleware(thunk)); // tạo store với rootReducer và sử dụng middleware Redux Thunk (Do trong action deposit có thực hiện các tác vụ bất đồng bộ) ``` ### 3.3. Sử dụng Redux kết hợp với React (Sẽ giống Context API + useReducer) Việc kết hợp với `react-redux` chúng ta sẽ có thêm 2 hàm chính là `useSelector` và `useDispatch` giúp chúng ta lấy state từ store và gửi action đến store mà không cần phải lúc nào cũng phải impot `store` vào component. Thay vào đó, chúng ta chỉ cần làm 2 bước: 1. Import `Provider` từ thư viện `react-redux` và wrap toàn bộ ứng dụng bằng `Provider` và truyền 1 props là `store` có giá trị là `store` đã tạo ở trên. 2. Sử dụng `useSelector` và `useDispatch` để lấy state từ store và gửi action đến store. - `useSelector`: lấy state từ store. Hàm này nhận vào một hàm nhận vào store và trả về state cần lấy. Ví dụ: `const account = useSelector(store => store.account)`. Sau đó sử dụng `account` để lấy giá trị cần thiết như `account.balance`, `account.loan`, `account.loanPurpose`, ... - `useDispatch`: lấy hàm `dispatch` từ store. Ví dụ: `const dispatch = useDispatch();`. Sau đó gọi hàm `dispatch` với tham số là action cần gửi đến store. (Lưu ý: action cần phải có dạng `{type: 'domain/action', payload: data}`). Cài đặt thư viện `react-redux` ```bash npm install react-redux ``` > Import `Provider` từ thư viện `react-redux` và wrap toàn bộ ứng dụng bằng `Provider` và truyền 1 props là `store` có giá trị là `store` đã tạo ở trên. `index.js` ```js import {Provider} from 'react-redux'; // import Provider từ thư viện react-redux import store from './store'; // import store từ file store.js (store sau khi được createStore từ redux) const root = ReactDOM.createRoot(document.getElementById("root")); root.render( {/* wrap toàn bộ ứng dụng bằng Provider */} ) ``` > Sử dụng `useSelector` và `useDispatch` để lấy state từ store và gửi action đến store. `App.js` ```js import {useSelector, useDispatch} from 'react-redux'; // import useSelector, useDispatch từ thư viện react-redux import {withdraw} from './feature/accountSlice'; // import action từ file accountSlice.js const App = () => { const account = useSelector(store => store.account); // lấy state account từ store {balance, loan, loanPurpose} const user = useSelector(state => state.user); // lấy state user từ store {fullName, nationalId, createdAt} const dispatch = useDispatch(); // lấy hàm dispatch từ store return (

Balance: {account.balance}

User: {user.name}

) } ``` ## 4. Redux Toolkit (Redux hiện đại) **Redux Toolkit** là một bộ công cụ giúp chúng ta viết **Redux** hiệu quả hơn, đơn giản hơn, ít boilerplate hơn. **Redux Toolkit** 100% tương thích với **Redux cổ điển**. **Redux Toolkit** đem lại 3 lợi ích chính: - Chúng ta có thể viết các đoạn code thay đổi trạng thái ở ngay trong **reducer** mà không cần phải tạo ra một bản sao của trạng thái. Sau đó **Redux Toolkit** sẽ tự động tạo ra một bản sao mới của trạng thái cho chúng ta bằng thư viện `Immer`. - **Redux Toolkit** sẽ tự động tạo ra các **action creater** (dispatch) tương ứng với **reducer** mà không cần phải viết thêm. - **Redux Toolkit** sẽ tự động tạo **middleware** và **Redux Devtool** cho chúng ta, không cần phải cài đặt thêm. **Redux Toolkit** cung cấp 3 method chính: - **createSlice**: giúp chúng ta tạo **reducer** và **action creater**. - **configureStore**: giúp chúng ta tạo **store** với **middleware** và **Redux Devtool**. - **createAsyncThunk**: giúp chúng ta viết các **action creater** cho các tác vụ bất đồng bộ. ### 4.1. Cài đặt ```bash npm install @reduxjs/toolkit ``` ### 4.2. Tạo **reducer** và **action creater** với **createSlice** Để tạo **reducer** và **action creater** chúng ta sử dụng **createSlice**. **createSlice** nhận vào 1 object với các trường: - **name**: tên của **slice** (bắt buộc). - **initialState**: trạng thái ban đầu của **slice** (bắt buộc). - **reducers**: 1 object chứa các hàm **reducer** (bắt buộc), ngăn cách nhau bởi dấu phẩy. Mỗi hàm **reducer** nhận vào 2 tham số là **state** và **action**. Sau đó, chúng ta sẽ export ra các **action creater** và **reducer** từ **createSlice**. > Lưu ý: Mỗi hàm **reducer** chỉ cần trả về **state** mới sau khi thay đổi, không cần phải tạo ra một bản sao mới của **state**. **Redux Toolkit** sẽ tự động tạo ra một bản sao mới của **state**. Có nghĩa là chúng ta có thể thay đổi trực tiếp trên **state** như **state.balance += action.payload** chứ không cần phải tạo ra một bản sao mới như **{...state, balance: state.balance + action.payload}**. Tham số **action** của **reducer** trong **Redux Toolkit** là một **object** chứa 2 trường là **type** và **payload**. **type** là tên của **action** và **payload** là dữ liệu cần thiết để thay đổi **state**. >feature/accountSlice.js ```js import {createSlice} from '@reduxjs/toolkit'; const initialState = {balance: 0, loan: 0, loanPurpose: ''}; const accountSlice = createSlice({ name: 'account', initialState, reducers: { deposit: (state, action) => { state.balance += action.payload; }, withdraw: (state, action) => { state.balance -= action.payload; } } }) // Export ra các action creater dùng để gửi action đến reducer export const {deposit, withdraw} = accountSlice.actions; // Export ra reducer Dùng để tạo store export default accountSlice.reducer; ``` > Lưu ý: Tuy nhiên, mỗi lần truyền vào **payload** chúng ta chỉ có thể truyền vào 1 tham số, nếu cần truyền nhiều tham số chúng ta cần truyền vào 1 **object** chứa nhiều trường. Hoặc nếu muốn truyền vào nhiều tham số, chúng ta cần phải tạo thêm một hàm `prepare` và `reducer` trong hàm `reducers` đó. Ví dụ: ```js // Truyền vào 1 object chứa nhiều trường ... const _ = createSlice({ name: 'account', initialState, reducers: { deposit: { prepare: (param1, param2, param3,...) => { return { payload: { param1, param2, param3, ... } } }, // hàm prepare trả về một object chứa nhiều trường reducer: (state, action) => { state.balance += action.payload.param1; state.loan += action.payload.param2; state.loanPurpose = action.payload.param3; } } } }) ``` Sau đó chúng ta có thể gọi hàm `dispatch` với nhiều tham số truyền vào như sau, thay vì truyền vào 1 tham số là object: ```js // Truyền vào nhiều tham số dispatch(deposit(100, 200, 'Buy a new car')); ``` Nếu không muốn sử dụng **prepare** và **reducer** chúng ta có thể truyền vào 1 object chứa nhiều trường như sau: ```js // Truyền vào 1 object chứa nhiều trường dispatch(deposit({param1: 100, param2: 200, param3: 'Buy a new car'})); ``` ### 4.3. Tạo **store** với **Redux Toolkit** Sau khi đã tạo **reducer** và **action creater** với **createSlice** chúng ta sẽ tạo **store** với **configureStore**. **configureStore** nhận vào 1 object với **reducer**: object chứa các **reducer** đã tạo với **createSlice**. >store.js ```js import {configureStore} from '@reduxjs/toolkit'; import accountSlice from './feature/accountSlice'; import userSlice from './feature/userSlice'; const store = configureStore({ reducer: { account: accountSlice, // reducer account từ file accountSlice.js user: userSlice // reducer user từ file userSlice.js } }) export default store; ``` ### 4.4. Sử dụng Thunk với **createAsyncThunk** trong **Redux Toolkit** #### 4.4.1. Tạo **async action** với **Redux Cổ điển** Cách đơn giản là dùng như **Redux cổ điển** định nghĩa **action creater** trả về một hàm, trong hàm này có thể thực hiện các tác vụ bất đồng bộ. Sau đó export ra để sử dụng trong component thay vì export **action** của **createSlice.action**. > Tạo **action creater** trong **accountSlice.js** ```js // createSlice... // export action creater // export reducer // Async action export const fetchUser = (userId) => { return async (dispatch) => { dispatch({type: 'user/pending'}); try { const response = await fetch(`https://api.example.com/user/${userId}`); const data = await response.json(); dispatch({type: 'user/fetch/fulfilled', payload: data}); } catch (error) { dispatch({type: 'user/fetch/rejected', error: error.message}); } } } ``` > LƯU Ý: `type` của **action** cần phải theo chuẩn `domain/action`. #### 4.4.2. Tạo **async action** với **createAsyncThunk** trong **Redux Toolkit** 1. Import **createAsyncThunk** từ **@reduxjs/toolkit**. 2. Tạo 1 **createAsyncThunk** với 3 tham số: - **name**: tên của **action creater**. LƯU Ý: TÊN CỦA ACTION NÊN VIẾT THEO CHUẨN `domain/action`. - **payloadCreator**: hàm trả về một **promise**, async function. - **options**: cấu hình cho **action creater**, ví dụ: **condition**, **dispatch**, **getState**, **rejectWithValue**. **createAsyncThunk** sẽ tự động tạo ra 3 **action creater** tương ứng với 3 trạng thái của một tác vụ bất đồng bộ: **pending** (đang chờ để fetch), **fulfilled** (fetch thành công), **rejected** (fetch thất bại). 3. Trong hàm **createSlice** chúng ta sẽ sử dụng **extraReducers** để xử lý 3 trạng thái của **createAsyncThunk**. Trong **extraReducers** chúng ta sẽ sử dụng **builder** gọi tới 3 **builder.addCase** với tham số truyền vào lần lượt tương ứng với 3 trạng thái của **createAsyncThunk** và reducer tương ứng. 4. Export ra **action creater** để sử dụng trong component. > Tạo **async action** với **createAsyncThunk** trong **userSlice.js** ```js import {createAsyncThunk, createSlice} from '@reduxjs/toolkit'; const fetchUser = createAsyncThunk( // tạo createAsyncThunk 'user/fetch', // tên của action creater nên theo chuẩn domain/action async (params, { dispatch, getState }) => { const userId = params; const response = await fetch(`https://api.example.com/user/${userId}`); return response.json(); // trả về dữ liệu fetch được } ) const userSlice = createSlice({ name: 'user', initialState: {user: {}, status: 'idle', error: null}, reducers: {}, extraReducers: (builder) => { // xử lý 3 trạng thái của createAsyncThunk builder.addCase(fetchUser.pending, (state, action) => { // xử lý trạng thái pending của fetchUser state.status = 'loading'; }) .addCase(fetchUser.fulfilled, (state, action) => { // xử lý trạng thái fulfilled của fetchUser state.status = 'succeeded'; state.user = action.payload; }) .addCase(fetchUser.rejected, (state, action) => { // xử lý trạng thái rejected của fetchUser state.status = 'failed'; state.error = action.error.message; }) } }) export fetchUser; // export action creater ``` > Sau đó chúng ta có thể sử dụng **action creater** trong component như sau: ```js import {useDispatch} from 'react-redux'; import {fetchUser} from './feature/userSlice'; const App = () => { const dispatch = useDispatch(); dispatch(fetchUser(1)); // gửi action fetchUser với tham số là id của user cần fetch } ``` ## 5. So sánh Redux và Context API + useReducer | Context API + useReducer | Redux | |:-----------:|:----------:| | (+) Được build sẵn trong thư viện react | (-) Là gói package cần tải thêm (làm cho file bundle lớn) | | (+) Dễ dàng thiết lập với single context | (-) Cần mất nhiều thời gian để thiết lập | | (-) Mỗi khi thêm 1 slice mới cần phải tạo mới 1 context mới, tạo ra nhiều Provider gây ra "provider hell" | (+) Có thể tạo nhiều slice mà không cần tạo nhiều context, khi chúng có thể được combine lại với nhau | | (-) Không có cơ chế dành cho các tác vụ bất đồng bộ | (+) Có cơ chế middleware giúp thực hiện các tác vụ bất đồng bộ | | (-) Khó khăn trong việc tối ưu hóa | (+) Có cơ chế tối ưu hóa | | (-) Chỉ có công cụ React Devtool | (+) Có cả Redux Devtool | | Thường được sử dụng trong các ứng dụng nhỏ | Thích hợp cho các ứng dụng lớn | | Khi chỉ cần share các giá trị không thường xuyên thay đổi (Color theme, Language, auth ...) | Khi có các global UI state thay đổi thường xuyên (User, Cart, Notification, ...) vì Redux có cơ chế tối ưu hóa | | Khi cần giải quyết vấn đề truyền props qua nhiều component và quản lý state trong local sub-tree | Khi cần quản lý các state phức tạp (lồng nhau) vì Redux có thể thay đổi state bằng phép toán không thay đổi trạng thái (Immer) thay vì tạo ra bản sao mới |

ReactJS: Redux và Redux Toolkit