Mở đầu

Redux là một thư việc Javascript dùng để quản lý trạng thái (state) trong các ứng dụng web. Nó được phát triển dựa trên mô hình luồng dữ liệu cố định (Flux architecture) và được sử dụng rộng rãi trong các ứng dụng sử dụng React, nhưng cũng có thể được sử dụng với các thư viện khác. Tuy nhiên, Redux có thể khó cấu hình cho các dự án lớn và cần nhiều công sức để tạo ra các action, reducer và middleware cho dự án và nó cũng gây khó khăn cho những người mới học và sử dụng nó. Redux Toolkit sinh ra để chúng ta có thể sử dụng Redux hiệu quả và cấu hình dễ dàng hơn.

Redux Toolkit thực sự là một best practices để xử lý dữ liệu trong ứng dụng Redux. Trên trang chủ của Redux cũng đã khuyến khích sử dụng Redux Toolkit khi làm việc với ứng dụng React:

Redux Toolkit is our official recommended approach for writing Redux logic. It wraps around the Redux core, and contains packages and functions that we think are essential for building a Redux app. Redux Toolkit builds in our suggested best practices, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications. Sau đây là cách mình cấu hình Redux Toolkit cho dự án React viết bằng Typescript.

Cấu hình Store Redux

1. Cài đặt các thư viện cần thiết:

• NPM

npm install @reduxjs/toolkit react-redux

• YARN

yarn add @reduxjs/toolkit react-redux

2. Tạo một thư mục chứa các file Redux: Ở đây mình tạo thư mục store;

src/store

3. Cấu hình Redux bằng cách tạo các file trong thư mục vừa tạo:

• Tạo file config store. Tạo file index.ts:

import { configureStore } from "@reduxjs/toolkit";
import { rootReducer } from "./reducer"; // file này sẽ tạo ở bước tiếp theo

export const store = configureStore({
  reducer: rootReducer
  // Middleware mặc định là redux-thunk nên không cần cấu hình nếu không dùng thêm các middleware khác
});

// trích xuất type
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export default store;

• Cấu hình store vừa tạo trong file index.ts ở thư mục root:

import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import App from "./App";
import store from "./store";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <BrowserRouter>
    <React.StrictMode>
      <Provider store={store}>
        <App />
      </Provider>
    </React.StrictMode>
  </BrowserRouter>
);

• Tạo 1 file rootReducer.ts để kết nối các slice state:

import { combineReducers } from "@reduxjs/toolkit";
import siderBar from "./sider/sider"; // slice state sẽ tạo ở bước tiếp theo

export const rootReducer = combineReducers({
  siderBar
});

• Implement lại 2 hook thường được sử dụng. Tạo file reduxHook.ts:

import { useDispatch, useSelector } from "react-redux";
import type { TypedUseSelectorHook } from "react-redux";
import type { RootState, AppDispatch } from "./index";

// Sử dụng 2 hook này để get state và dispatch actions.
export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

Sử dụng

1. Khai báo một slice state:

• Tạo một slice state. Ở đây mình tạo 1 file để thay đổi trạng thái của thanh siderBar siderBar.ts:

import { createSlice } from "@reduxjs/toolkit";
import { RootState } from "../index";

export const initialState = {
  collapsed: false,
};

const SiderBar = createSlice({
  name: "siderBar",
  initialState,
  reducers: {
    toggleSiderBar: (state) => {
      state.collapsed = !state.collapsed;
    }
  },
  extraReducers: (builder) => {
     // viết các action bất động bộ
  }
});

export const SiderBarStore = (state: RootState) => state.siderBar; // get state
export const { toggleSiderBar } = SiderBar.actions; 
export default SiderBar.reducer;

2. Cách sử dụng:

• Khai báo useAppSelector đã tạo ở trên để get state từ slice:

const { collapsed } = useAppSelector(SiderBarStore);

• Khai báo useAppDispatch để tạo action:

const dispatch = useAppDispatch();

• Sử dụng

import { useAppDispatch, useAppSelector } from "../../store/reduxHook";
import { SiderBarStore, toggleSiderBar } from "../../store/sider/sider";

{React.createElement(collapsed ? RightOutlined : LeftOutlined, {
            className: "trigger",
            id: "trigger",
            onClick: () => dispatch(toggleSiderBar()), //toggleSiderBar là action redecers để thay đổi trạnh thái của state collapsed
          })}

Kết thúc

Trên đây là cách mình config và sử dụng Redux Toolkit trong dự án React. Các bạn có thể tham khảo thêm như là cách xử lý các aciton bất đồng bộ với createAsyncThunk trên trang chủ của Redux.

Tài liệu

https://redux.js.org/usage/usage-with-typescript