Redux Toolkit 入门指南：现代 Redux 开发的最佳实践

Redux Toolkit 入门指南：现代 Redux 开发的最佳实践

redux-toolkit The official, opinionated, batteries-included toolset for efficient Redux development 项目地址: https://gitcode.com/gh_mirrors/re/redux-toolkit

为什么需要 Redux Toolkit

Redux 作为 React 生态中最流行的状态管理方案，长期以来一直面临几个主要痛点：

1. 配置复杂：创建一个 Redux store 需要组合多个中间件和增强器
2. 依赖过多：实现常见功能需要添加多个额外包
3. 样板代码：需要编写大量重复性代码（action types、action creators、reducers 等）

Redux Toolkit（简称 RTK）正是为了解决这些问题而生的官方工具集。它提供了一系列开箱即用的工具和最佳实践，让开发者能够：

• 更快速地设置 Redux store
• 减少样板代码
• 内置常用功能（如 Redux Thunk 中间件）
• 提供现代化 API（如基于 Immer 的不可变更新）

核心功能概览

1. configureStore()

这是对 Redux 核心 createStore 的封装，提供简化的配置选项和智能默认值：

import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
  devTools: process.env.NODE_ENV !== 'production'
})

它会自动：

• 组合你的 slice reducers
• 添加你提供的任何 Redux 中间件
• 默认包含 redux-thunk
• 启用 Redux DevTools 扩展

2. createReducer()

允许你提供一个 action 类型到 case reducer 函数的查找表，而不是写 switch 语句：

const counterReducer = createReducer(0, {
  increment: (state) => state + 1,
  decrement: (state) => state - 1,
  multiply: (state, action) => state * action.payload
})

更重要的是，它内部使用 Immer 库，让你可以用可变的方式编写不可变更新：

const todosReducer = createReducer([], {
  addTodo: (state, action) => {
    // "突变" state - Immer 会安全地转换为不可变更新
    state.push(action.payload)
  }
})

3. createAction()

生成给定 action 类型的 action creator 函数：

const increment = createAction('counter/increment')
// increment() 返回 { type: 'counter/increment' }
const incrementBy = createAction('counter/incrementBy')
// incrementBy(5) 返回 { type: 'counter/incrementBy', payload: 5 }

4. createSlice()

这是 Redux Toolkit 的核心 API，它接受一个包含 reducer 函数的对象、slice 名称和初始状态值，然后自动生成：

• 对应 action types
• action creator 函数
• slice reducer 函数

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
    decrement: (state) => state - 1,
    multiply: (state, action) => state * action.payload
  }
})

const { actions, reducer } = counterSlice
// actions: { increment, decrement, multiply }
// reducer: 处理这些 action 的 reducer

5. createAsyncThunk

处理异步逻辑的标准方式：

const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => {
    const response = await userAPI.fetchById(userId)
    return response.data
  }
)

它会自动生成并 dispatch 三种 action：

• pending（开始）
• fulfilled（成功）
• rejected（失败）

RTK Query：数据获取和缓存解决方案

RTK Query 是 Redux Toolkit 中的可选附加功能，专门用于解决数据获取和缓存问题。它提供了一套紧凑但强大的工具集，用于为你的应用定义 API 接口层。

主要特点

1. 自动缓存：相同请求不会重复发送
2. 请求生命周期管理：自动跟踪加载状态
3. 数据转换：内置对响应数据的标准化和转换支持
4. 实时更新：支持缓存标签和手动失效

基本用法

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => '/posts'
    }),
    addPost: builder.mutation({
      query: (post) => ({
        url: '/posts',
        method: 'POST',
        body: post
      })
    })
  })
})

// 自动生成 hooks
export const { useGetPostsQuery, useAddPostMutation } = apiSlice

项目初始化建议

新项目启动

对于新项目，推荐使用现代构建工具模板：

1. Vite + Redux Toolkit + TypeScript 模板：

   npx degit reduxjs/redux-templates/packages/vite-template-redux my-app
   

2. Next.js with-redux 模板：

   npx create-next-app --example with-redux my-app
   

这些模板已经预配置了 Redux Toolkit 和 React-Redux，并包含示例代码。

现有项目集成

在已有项目中安装：

npm install @reduxjs/toolkit react-redux
# 或
yarn add @reduxjs/toolkit react-redux

学习路径建议

1. 初学者：从 Redux Essentials 教程开始，学习"正确使用 Redux"的方式
2. 想深入理解：阅读 Redux Fundamentals 教程，了解 Redux 的工作原理
3. 视觉学习者：观看"Learn Modern Redux"直播录像，了解实际编码示例

总结

Redux Toolkit 代表了 Redux 使用的现代最佳实践，它通过提供精心设计的 API 和智能默认值，显著简化了 Redux 的使用。无论你是 Redux 新手还是经验丰富的开发者，采用 Redux Toolkit 都能让你的代码更简洁、更易维护。

特别是 RTK Query 的加入，解决了 Redux 生态中长期存在的数据获取和缓存管理难题，使得 Redux 成为一个更完整的状态管理解决方案。

redux-toolkit The official, opinionated, batteries-included toolset for efficient Redux development 项目地址: https://gitcode.com/gh_mirrors/re/redux-toolkit