返回

React+TS中Redux Toolkit的使用指南

前端

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>
>;

总结

Redux Toolkit 是一个功能强大的工具,可以帮助您构建健壮、可维护的 Redux 应用程序。它提供了众多工具,简化了 Redux 开发流程,使您可以专注于应用程序逻辑。

常见问题解答

1. Redux Toolkit 与 Redux 有什么区别?

Redux Toolkit 是 Redux 的一个扩展,它提供了一系列工具,使 Redux 开发更容易、更有效率。

2. Slice 是什么?

Slice 是 Redux Toolkit 中的一个概念,它将相关的数据、操作和选择器组合成一个模块。

3. 如何使用 Middleware?

Middleware 可以通过在创建 Store 时将其传递给 configureStore函数来使用。

4. 如何访问 Store 中的数据?

您可以使用选择器从 Store 中访问数据。选择器是函数,它接收 Store 状态并返回所需数据。

5. Redux Toolkit 是否支持 TypeScript?

是的,Redux Toolkit 完全支持 TypeScript。