Redux Thunk Là Gì? Cách dùng Redux với ví dụ chi Tiết Từ A-Z

Giới Thiệu

Redux Thunk là một middleware (phần mềm trung gian) được sử dụng trong Redux, một thư viện quản lý trạng thái phổ biến trong ứng dụng React và JavaScript. Middleware là một cơ chế cho phép bạn mở rộng hoặc tùy chỉnh hành vi của Redux Store mà không cần sửa đổi trực tiếp các reducer.

Trong Redux, việc thay đổi trạng thái (state) của ứng dụng thông qua các action thường được thực hiện bởi các reducers. Reducers là các hàm xử lý action và trả về trạng thái mới của ứng dụng. Tuy nhiên, đôi khi việc thực hiện các side effect (hiệu ứng phụ) như gọi API, xử lý các yêu cầu không đồng bộ, hoặc trạng thái điều hướng (routing) yêu cầu một cơ chế khác.

Đây là lúc Redux Thunk vào hình. Redux Thunk cho phép bạn viết các action creators (người tạo action) trả về một hàm thay vì một đối tượng action thông thường. Hàm này được gọi là "thunk". Thunk có thể chứa các logic phức tạp, bao gồm việc thực hiện các side effect, và nó có thể dispatch (gửi) các action thông qua store để cập nhật trạng thái.

Video học lập trình Redux Thunk cơ bản

Khi nào sử dụng Redux Thunk?

1. Gọi API để lấy dữ liệu: Khi bạn cần lấy dữ liệu từ máy chủ thông qua API, bạn có thể sử dụng Redux Thunk để dispatch một action creator trả về một hàm. Trong hàm này, bạn có thể gọi API bất đồng bộ và sau đó dispatch các action để cập nhật Redux store với dữ liệu mới.
2. Xử lý các tác vụ không đồng bộ: Ngoài việc gọi API, bạn có thể sử dụng Redux Thunk để xử lý các tác vụ không đồng bộ khác, chẳng hạn như lưu trữ dữ liệu vào cơ sở dữ liệu, tải xuống các tệp tin, và làm các tác vụ tiêu tốn thời gian.
3. Xử lý điều kiện phức tạp trong action creators: Khi bạn cần thực hiện các điều kiện phức tạp trong action creators, Redux Thunk cho phép bạn thực hiện các phép tính bất đồng bộ, tiến hành kiểm tra và logic phức tạp trước khi dispatch action.
4. Chia sẻ dữ liệu giữa các action: Redux Thunk cho phép bạn dispatch nhiều action liên tiếp hoặc đồng thời, điều này giúp bạn quản lý dữ liệu phức tạp hơn và chia sẻ thông tin giữa các action một cách dễ dàng.

Lưu ý : Khi ứng dụng của bạn có một hoặc nhiều trong những tình huống trên, Redux Thunk là một lựa chọn tốt để quản lý các tác động phụ và giữ cho quy trình Redux linh hoạt và dễ dàng mở rộng.

Nguyên lý hoạt động Redux Thunk

Một ví dụ cơ bản về cách sử dụng Redux Thunk:

Cài thư viện

🪢 npm i redux-thunk

Tạo Store

// src/store.js  Redux toolkit

import { configureStore } from '@reduxjs/toolkit'

import todosReducer from './features/todos/todosSlice'
import filtersReducer from './features/filters/filtersSlice'

const store = configureStore({
  reducer: {
    // Define a top-level state field named `todos`, handled by `todosReducer`
    todos: todosReducer,
    filters: filtersReducer
  }
})

export default store

Với cách tổ chức logic như trên, chúng ta sẽ phải thực hiện các công việc sau:

• Ghép các reducers con lại với nhau thành root reducer
• Import root reducer vào store file
• Nếu muốn sử dụng middleware thì cần phải cài đặt package, sử dụng hàm applyMiddleware để sử dụng.

Tạo Slice

import { createSlice } from '@reduxjs/toolkit'

const initialState = []

const todosSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {

    todoAdded(state, action) {
      // ✅ This "mutating" code is okay inside of createSlice!
      state.push(action.payload)
    },

    todoToggled(state, action) {
      const todo = state.find(todo => todo.id === action.payload)
      todo.completed = !todo.completed
    },

    todosLoading(state, action) {
      return {
        ...state,
        status: 'loading'
      }
    }
  }
})

export const { todoAdded, todoToggled, todosLoading } = todosSlice.actions;

export function reducerWithImmer(payload) {
return (dispatch)=>{
   // Xử lý dữ liệu tại đây.
  dispatch(todoAdded(payload))
  }
 }
  export default todosSlice.reducer
  

Dispatch

import { useDispatch} from "react-redux";
import { reducerWithImmer} from "/slice/TodoSlice"
import { useEffect} from "react";

export default function App(){                                            
  const dispatch= useDispatch();

  useEffect(()=>{
// Khi gọi reducerWithImmer thêm dữ liệu payload 

  const payload={todo:"Learn Redux Thunk"}
  dispatch(reducerWithImmer(payload));
},[])
   return (<></>)
}

Trong ví dụ này khi dữ liệu(payload) gửi đi thì sẽ thông qua hàm xử lý reducerImmer ở todosSlice dạng middleware, nếu dữ liệu ok thì sẽ cập nhập ở Store.

Tổng kết

Đừng sử dụng bất cứ middleware nào từ Redux Thunk, nếu bạn thực sự không cần chúng và hiểu bạn đang làm gì.

Nếu app của bạn tương lai có thể mở rộng và bạn muốn nhận được những lợi ích mà "thunk" mang lại như giải quyết được vấn đề truyền dispatch đi khắp mọi nơi trong component thì mình recommend là dùng ngay và luôn cho chắc. Dù gì nó cũng rất nhẹ.