React+TS中Redux Toolkit的使用指南

2023-11-04 15:01:09

Redux Toolkit：提升 Redux 开发的指南

简介

Redux Toolkit 是由 Redux 团队创建的官方工具包，旨在简化 Redux 应用程序的构建过程。它提供了一系列工具，可帮助您提高开发效率、避免常见错误并简化代码。

根 Store 的定义

根 Store 是 Redux 应用程序的核心，它存储着应用程序的全局状态。使用 Redux Toolkit 定义根 Store 非常简单：

import { configureStore } from "@reduxjs/toolkit";
import counterSlice from "./features/counter/counterSlice";

export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});

根 Store 的配置

为了增强开发体验，您还可以配置根 Store 以启用 Redux DevTools 扩展：

import { configureStore } from "@reduxjs/toolkit";
import { devToolsEnhancer } from "redux-devtools-extension";
import counterSlice from "./features/counter/counterSlice";

export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
  devTools: process.env.NODE_ENV !== "production",
  enhancers: [devToolsEnhancer()],
});

Slice

Slice 是 Redux Toolkit 中的一个关键概念，它将相关的数据、操作和选择器组合成一个模块。它通常定义如下：

import { createSlice } from "@reduxjs/toolkit";

export const counterSlice = createSlice({
  name: "counter",
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value++;
    },
    decrement: (state) => {
      state.value--;
    },
  },
});

Action

Action 表示应用程序中的事件，它包含一个类型和可选的有效负载：

export const incrementAction = () => ({
  type: "counter/increment",
});

Reducer

Reducer 是一个函数，它处理 Action 并更新应用程序的状态：

export const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case "counter/increment":
      return { ...state, value: state.value + 1 };
    case "counter/decrement":
      return { ...state, value: state.value - 1 };
    default:
      return state;
  }
};

Selector

Selector 是一个函数，它从 Store 中获取数据：

export const selectCount = (state) => state.counter.value;

Middleware

Middleware 是一个函数，它可以在 Action 分发到 Store 之前或之后执行某些操作：

import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit";
import thunk from "redux-thunk";
import counterSlice from "./features/counter/counterSlice";

export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
  middleware: [thunk],
});

export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>;