React-Redux 现代开发指南：使用 Redux Toolkit 简化状态管理

包力文Hardy

于 2025-05-30 09:04:25 发布

阅读量252

点赞数 3

本文链接：https://blog.csdn.net/gitblog_01061/article/details/148324009

版权

React-Redux 现代开发指南：使用 Redux Toolkit 简化状态管理

redux 项目地址: https://gitcode.com/gh_mirrors/red/redux

前言

在 React 应用开发中，Redux 一直是状态管理的首选方案之一。然而，传统的 Redux 开发模式存在一些痛点：需要手动编写大量模板代码、容易出错的状态更新、复杂的异步逻辑处理等。本文将介绍如何使用 Redux Toolkit 这一官方推荐工具集来简化 Redux 开发流程，提高开发效率。

Redux Toolkit 简介

Redux Toolkit 是 Redux 官方推出的"开箱即用"工具集，它内置了 Redux 开发的最佳实践，能够：

简化大多数 Redux 任务
防止常见错误
减少样板代码
提供更直观的 API

重要提示：虽然我们之前学习的手写 Redux 代码是完全可用的，但在实际项目中应该始终使用 Redux Toolkit 来编写 Redux 逻辑。

安装与配置

首先需要安装 Redux Toolkit：

npm install @reduxjs/toolkit

Redux Toolkit 已经包含了 redux、redux-thunk 和 reselect 等常用包，因此可以移除这些单独的依赖。

简化 Store 配置

传统 Redux store 配置需要多个步骤：

import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import rootReducer from './reducer'

const composedEnhancer = composeWithDevTools(applyMiddleware(thunkMiddleware))

const store = createStore(rootReducer, composedEnhancer)

使用 Redux Toolkit 的 configureStore 可以大幅简化：

import { configureStore } from '@reduxjs/toolkit'
import todosReducer from './features/todos/todosSlice'
import filtersReducer from './features/filters/filtersSlice'

const store = configureStore({
  reducer: {
    todos: todosReducer,
    filters: filtersReducer
  }
})

configureStore 自动完成了以下工作：

组合 reducer
添加 thunk 中间件
设置 Redux DevTools 扩展
包含开发环境下的状态变更检查

使用 createSlice 简化 Reducer

传统 reducer 需要手动编写 action types、action creators 和 switch-case 逻辑。Redux Toolkit 的 createSlice API 可以自动生成这些内容。

createSlice 基础用法

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  entities: [],
  status: null
}

const todosSlice = createSlice({
  name: 'todos',  // 用于生成 action type 前缀
  initialState,
  reducers: {
    // 案例 reducer 函数
    todoAdded(state, action) {
      state.entities.push(action.payload)
    },
    todoToggled(state, action) {
      const todo = state.entities.find(todo => todo.id === action.payload)
      todo.completed = !todo.completed
    }
  }
})

// 自动生成的 action creators
export const { todoAdded, todoToggled } = todosSlice.actions

// reducer 函数
export default todosSlice.reducer

核心优势

自动生成 action types：如 todos/todoAdded
自动生成 action creators：如 todoAdded(payload)
简化不可变更新：可以使用"看似可变"的写法

Immer 与不可变更新

Redux 要求 reducer 必须是纯函数，不能直接修改 state。传统方式需要手动创建副本：

function handwrittenReducer(state, action) {
  return {
    ...state,
    first: {
      ...state.first,
      second: {
        ...state.first.second,
        [action.someId]: {
          ...state.first.second[action.someId],
          fourth: action.someValue
        }
      }
    }
  }
}

createSlice 内部使用 Immer 库，允许我们以"可变"的方式编写更新逻辑：

function reducerWithImmer(state, action) {
  state.first.second[action.someId].fourth = action.someValue
}

重要提示：这种"可变"写法仅在 createSlice 和 createReducer 中有效，因为它们内部使用了 Immer。在普通 reducer 中这样写会导致状态被意外修改！

完整案例：Todo 应用改造

让我们看一个更完整的例子，将传统的 todos reducer 转换为使用 createSlice：

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  status: 'idle',
  entities: {}
}

const todosSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {
    todoAdded(state, action) {
      const todo = action.payload
      state.entities[todo.id] = todo
    },
    todoToggled(state, action) {
      const todoId = action.payload
      const todo = state.entities[todoId]
      todo.completed = !todo.completed
    },
    todoColorSelected: {
      reducer(state, action) {
        const { color, todoId } = action.payload
        state.entities[todoId].color = color
      },
      prepare(todoId, color) {
        return {
          payload: { todoId, color }
        }
      }
    },
    todoDeleted(state, action) {
      delete state.entities[action.payload]
    }
  }
})

export const { 
  todoAdded, 
  todoToggled, 
  todoColorSelected, 
  todoDeleted 
} = todosSlice.actions

export default todosSlice.reducer