Redux Toolkit状态修改禁忌及使用技巧咨询

Immer两种状态更新模式的区别 #

1. 修改与返回状态（局部修改） #

这种模式是在Immer提供的draft状态上直接修改属性，不需要返回任何值。Immer会自动追踪你对draft的所有修改，最终生成符合不可变要求的新状态。适合只需要修改现有状态部分属性的场景。

示例：

const todosSlice = createSlice({
  name: 'todos',
  initialState: [{ id: 1, text: 'Learn RTK', completed: false }],
  reducers: {
    toggleTodo(state, action) {
      const targetTodo = state.find(todo => todo.id === action.payload);
      if (targetTodo) {
        targetTodo.completed = !targetTodo.completed;
      }
      // 无需返回state，Immer自动处理不可变更新
    }
  }
});

2. 重置与替换状态（完全替换） #

当你需要完全替换整个状态或某一层级状态时，直接返回新值即可。此时Immer会忽略对draft的任何修改，直接用返回的新值作为该层级的状态。适合重置状态、替换整个数组/对象的场景。

示例：

const filterSlice = createSlice({
  name: 'filter',
  initialState: 'all',
  reducers: {
    setFilter(state, action) {
      // 直接返回新筛选值，替换原有状态
      return action.payload;
    },
    resetTodos(state) {
      // 重置整个todos数组为空
      return [];
    }
  }
});

关键区别：前者是在原有状态结构上做局部修改，后者是直接替换状态（或某层级）。若在同一个reducer中既修改draft又返回新值，Immer会优先采用返回的新值，忽略draft修改。

嵌套数据更新方法 #

RTK的Immer支持直接在嵌套的draft状态上逐层修改，无需像传统Redux那样手动深拷贝或展开对象/数组。

基础嵌套修改 #

假设初始状态：

initialState: {
  user: {
    profile: {
      name: 'Alice',
      settings: {
        notifications: true
      }
    }
  }
}

修改嵌套的notifications属性：

reducers: {
  toggleNotifications(state) {
    // 直接逐层访问并修改draft属性
    state.user.profile.settings.notifications = !state.user.profile.settings.notifications;
  }
}

数组中的嵌套对象修改 #

若状态包含数组，数组元素为嵌套对象，可直接定位后修改：

initialState: {
  posts: [
    { id: 1, comments: [{ id: 'c1', text: 'Nice post!' }] }
  ]
}

修改指定post下的评论内容：

reducers: {
  editComment(state, action) {
    const { postId, commentId, newText } = action.payload;
    const targetPost = state.posts.find(post => post.id === postId);
    if (targetPost) {
      const targetComment = targetPost.comments.find(comment => comment.id === commentId);
      if (targetComment) {
        targetComment.text = newText;
      }
    }
  }
}

核心使用禁忌与技巧 #

禁忌 #

• 禁止在reducer、createAsyncThunk的状态更新回调之外修改Redux状态，仅能在RTK允许的上下文里操作draft。
• 不要在同一个reducer中混合“修改draft”和“返回新状态”的模式，除非明确需要替换状态，否则易引发预期外结果。

技巧 #

• 优先用createSlice定义reducers和actions：自动生成action types和creator函数，减少样板代码。
• 用createAsyncThunk处理异步逻辑：自动生成pending/fulfilled/rejected三种状态的action，简化异步流程的状态管理。
• 列表数据用createEntityAdapter：提供addOne、updateOne、removeOne等现成CRUD方法，自动处理不可变更新，还能生成标准化选择器。
• 优化组件重渲染：用createSelector（RTK已集成reselect）创建缓存选择器，避免无关状态变化导致的重渲染。
• 扁平化状态结构：尽量避免过度嵌套，比如将users、posts等数据存储在state顶层，而非嵌套在大对象中，提升更新和查询效率。

内容的提问来源于stack exchange，提问作者carenm