Khái niệm

Redux Toolkit là một bộ công cụ (toolkit) chính thức của Redux, giúp đơn giản hóa cách sử dụng Redux và giảm bớt độ phức tạp khi cấu hình Redux. Nó cung cấp các API và tiện ích để viết mã Redux ngắn gọn, dễ đọc và dễ hiểu hơn. Redux Toolkit bao gồm các tính năng như tự động sinh reducer, tự động sinh action, và hỗ trợ xử lý tác vụ bất đồng bộ.

Để tìm hiểu rõ hơn về Redux Toolkit, ta cần làm rõ các thuật ngữ sau:

• configureStore là một hàm được cung cấp bởi Redux Toolkit để tạo store Redux. Hàm này tự động kết hợp các tính năng như Redux DevTools và middleware Redux Saga để giúp việc cấu hình store dễ dàng hơn.
• createSlice là một hàm được cung cấp bởi Redux Toolkit để tạo reducer và action một cách tự động. Hàm này giảm bớt công việc lặp đi lặp lại khi viết reducer và action trong Redux. Nó chỉ yêu cầu bạn định nghĩa các trường (fields) và các reducer tương ứng.
• createAsyncThunk là một hàm được cung cấp bởi Redux Toolkit để xử lý các tác vụ bất đồng bộ trong Redux. Hàm này tự động sinh ra action cho các tác vụ bất đồng bộ và giúp việc quản lý trạng thái của chúng dễ dàng hơn.
• createEntityAdapter là một tiện ích được cung cấp bởi Redux Toolkit để quản lý trạng thái của một tập hợp các đối tượng (entities). Nó giúp việc thêm, sửa, xóa và truy vấn dữ liệu dễ dàng hơn trong Redux.

Ví dụ

Dưới đây là một ví dụ đơn giản về cách sử dụng Redux Toolkit trong ứng dụng React:

Cài đặt Redux Toolkit:

npm install @reduxjs/toolkit

Tạo file counterSlice.js để tạo reducer và action với createSlice:

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => {
      return state + 1;
    },
    decrement: (state) => {
      return state - 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

Tạo file store.js để tạo store Redux với configureStore:

// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

Sử dụng Redux Toolkit trong ứng dụng React:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

function App() {
  const count = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default App;

Trong ví dụ trên, chúng ta đã sử dụng createSlice để tạo reducer và action cho counter. Hàm configureStore được sử dụng để tạo store Redux với reducer tương ứng. Trong component App, chúng ta sử dụng hook useSelector để lấy trạng thái từ store và hook useDispatch để gửi action tới reducer.