Redux中的不可变更新模式详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00161/article/details/148324253

Redux中的不可变更新模式详解

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

引言

在Redux应用中，状态管理的一个核心原则就是不可变性(immutability)。这意味着我们不应该直接修改现有的状态对象，而是应该创建新的对象来包含所有必要的更改。本文将深入探讨Redux中实现不可变更新的各种模式，帮助开发者避免常见错误，并掌握高效的状态更新技巧。

为什么需要不可变更新

在Redux中，不可变更新至关重要，原因有三：

性能优化：通过简单的引用比较可以快速检测状态变化
时间旅行调试：能够追踪状态的历史变化
可预测性：确保状态变化明确且可追踪

嵌套对象的更新

正确方法：复制所有嵌套层级

更新嵌套数据的关键在于必须适当地复制和更新每一个嵌套层级。来看一个深层嵌套状态更新的例子：

function updateVeryNestedField(state, action) {
  return {
    ...state,  // 复制顶层
    first: {
      ...state.first,  // 复制first层级
      second: {
        ...state.first.second,  // 复制second层级
        [action.someId]: {
          ...state.first.second[action.someId],  // 复制特定ID对象
          fourth: action.someValue  // 实际更新
        }
      }
    }
  }
}

这种"层层展开"的语法虽然正确，但随着嵌套深度增加会变得难以维护。这也是为什么Redux鼓励保持状态扁平化和组合reducer。

常见错误分析

错误1：创建指向相同对象的新变量

function updateNestedState(state, action) {
  let nestedState = state.nestedState  // 只是创建引用，不是拷贝
  nestedState.nestedField = action.data  // 直接修改了原状态！
  
  return {
    ...state,
    nestedState
  }
}

虽然顶层状态被复制了，但nestedState仍指向原对象，导致直接突变。

错误2：只进行浅拷贝

function updateNestedState(state, action) {
  let newState = { ...state }  // 只复制了顶层
  
  newState.nestedState.nestedField = action.data  // 仍然修改了原嵌套对象
  
  return newState
}

仅对顶层进行浅拷贝是不够的，必须同时复制嵌套对象。

数组的不可变操作

添加和删除元素

传统数组方法如push、splice会直接修改原数组，在Redux中应避免使用。以下是不可变的实现方式：

插入元素

function insertItem(array, action) {
  return [
    ...array.slice(0, action.index),  // 前半部分
    action.item,                      // 新元素
    ...array.slice(action.index)      // 后半部分
  ]
}

删除元素

function removeItem(array, action) {
  return [
    ...array.slice(0, action.index),  // 删除点之前
    ...array.slice(action.index + 1)  // 删除点之后
  ]
}

或者使用filter:

function removeItem(array, action) {
  return array.filter((item, index) => index !== action.index)
}

修改数组元素

使用map可以创建新数组并更新特定元素：

function updateObjectInArray(array, action) {
  return array.map((item, index) => {
    if (index !== action.index) {
      return item  // 不是目标元素，保持不变
    }
    return {       // 目标元素，返回更新后的版本
      ...item,
      ...action.item
    }
  })
}

实用工具库推荐

手动编写不可变更新逻辑可能很繁琐，以下是一些简化流程的实用工具：

Immer：允许使用可变语法编写不可变逻辑

import produce from 'immer'

const nextState = produce(currentState, draft => {
  draft[1].done = true
  draft.push({title: "New item"})
})

immutability-helper：基于React旧版不可变助手

import update from 'immutability-helper'

const newData = update(myData, {
  x: {y: {z: {$set: 7}}},
  a: {b: {$push: [9]}}
})

Redux Toolkit：官方推荐的Redux工具集，内置不可变更新支持

Redux Toolkit简化方案

Redux Toolkit的createReducer和createSlice利用Immer简化了不可变更新：

import { createSlice } from '@reduxjs/toolkit'

const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      // "突变"语法在Immer内部会被转为不可变更新
      state.push(action.payload)
    },
    toggleTodo: (state, action) => {
      const todo = state.find(todo => todo.id === action.payload)
      if (todo) {
        todo.completed = !todo.completed
      }
    }
  }
})