Redux Toolkit中使用Immer编写Reducers的完全指南

郁勉能Lois

于 2025-06-04 09:00:09 发布

阅读量264

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/gitblog_00116/article/details/148415016

Redux Toolkit中使用Immer编写Reducers的完全指南

前言

在现代前端开发中，状态管理是一个核心话题。Redux作为最流行的状态管理解决方案之一，其核心原则之一就是状态不可变性（immutability）。然而，手动编写不可变更新逻辑往往既繁琐又容易出错。这正是Redux Toolkit引入Immer库的原因。

不可变性与Redux基础

什么是不可变性

在JavaScript中，对象和数组默认是可变的（mutable），这意味着我们可以直接修改它们的内容。例如：

const obj = { a: 1, b: 2 };
obj.b = 3; // 直接修改对象属性

const arr = ['a', 'b'];
arr.push('c'); // 直接修改数组

不可变性则要求我们不直接修改原始数据，而是创建数据的副本并修改副本。在Redux中，这通常通过展开运算符（spread operator）或返回新数组的方法来实现：

// 对象不可变更新
const newObj = {
  ...obj,
  b: 3
};

// 数组不可变更新
const newArr = [...arr, 'c'];

Redux中的不可变性要求

Redux严格要求reducers必须是纯函数，不能直接修改传入的state。这样做有几个重要原因：

确保时间旅行调试功能正常工作
使状态变化更可预测
便于比较新旧状态
避免意外的副作用

Immer简介

Immer是一个让不可变更新变得更简单的库。它的核心思想是：让你使用看似"可变"的语法，但实际上执行的是不可变的更新。

Immer的工作原理是：

接收当前状态作为输入
提供一个"草稿"（draft）状态供你修改
记录所有对草稿状态的修改
基于这些修改生成新的不可变状态

import { produce } from 'immer';

const nextState = produce(baseState, draftState => {
  draftState.push({todo: 'Learn Immer'});
  draftState[1].done = true;
});

Redux Toolkit中的Immer集成

Redux Toolkit内置了Immer，这意味着在使用createReducer和createSlice时，你可以直接使用"可变"语法来更新状态，而实际上执行的是不可变更新。

使用createReducer

import { createReducer } from '@reduxjs/toolkit';

const todosReducer = createReducer([], (builder) => {
  builder.addCase('todos/add', (state, action) => {
    // 看似直接修改，实际上是不可变更新
    state.push(action.payload);
  });
});

使用createSlice

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

const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo(state, action) {
      state.push(action.payload);
    }
  }
});

最佳实践与常见模式

1. 修改状态与返回新状态

在同一个reducer中，你应该要么修改现有状态，要么返回全新状态，但不要同时使用两种方式。

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    // 正确：直接修改
    increment(state) {
      state++;
    },
    // 正确：返回新值
    reset() {
      return 0;
    },
    // 错误：不要这样做
    badExample(state, action) {
      state++;
      return state + action.payload;
    }
  }
});

2. 重置或替换整个状态

要替换整个状态，应该直接返回新值，而不是尝试赋值：

const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    // 错误：不会实际更新状态
    brokenReset(state) {
      state = [];
    },
    // 正确：返回新值
    correctReset() {
      return [];
    }
  }
});

3. 调试草稿状态

由于Immer使用Proxy包装状态，直接console.log输出可能不易阅读。可以使用current函数来查看当前状态：

import { current } from '@reduxjs/toolkit';

const slice = createSlice({
  name: 'example',
  initialState: { data: [] },
  reducers: {
    updateData(state) {
      console.log(current(state)); // 输出易读的状态
      state.data.push('new item');
    }
  }
});

4. 更新嵌套数据

Immer可以很好地处理嵌套数据更新，但需要注意：

不能将原始值提取到变量中修改
需要确保嵌套结构存在

const itemsSlice = createSlice({
  name: 'items',
  initialState: {},
  reducers: {
    addItem(state, action) {
      const { category, item } = action.payload;
      // 确保嵌套数组存在
      if (!state[category]) {
        state[category] = [];
      }
      state[category].push(item);
    }
  }
});

为什么Immer是Redux Toolkit的核心部分

Redux Toolkit坚持将Immer作为必需部分，主要基于以下考虑：

简化代码：手动不可变更新通常非常冗长，Immer大幅简化了这种代码
减少错误：手动编写不可变更新容易出错，特别是处理深层嵌套时
提高可读性：Immer代码更清晰地表达了开发者意图
性能优化：Immer只在必要时创建新引用，优化了性能

常见问题与解决方案

ESLint警告

如果你的ESLint配置包含no-param-reassign规则，可能会对reducer中的状态修改发出警告。可以通过修改ESLint配置解决：

// .eslintrc.js
module.exports = {
  overrides: [
    {
      files: ['**/*.slice.js'],
      rules: {
        'no-param-reassign': ['error', { props: false }]
      }
    }
  ]
};

箭头函数问题

在箭头函数中直接返回修改结果会导致错误：

const slice = createSlice({
  name: 'example',
  initialState: [],
  reducers: {
    // 错误：同时修改和返回
    broken: (state, action) => state.push(action.payload),
    // 解决方案1：使用void
    fixed1: (state, action) => void state.push(action.payload),
    // 解决方案2：使用函数体
    fixed2: (state, action) => {
      state.push(action.payload);
    }
  }
});