如何在Reducer中正确修改状态？API请求后无突变状态更新方案

嘿，这个问题我太熟悉了！在Redux里保持状态不可变是核心原则，针对你从API获取用户信息、要更新用户数据和进度值的场景，咱们一步步拆解怎么写这个Reducer。

首先先明确几个前提：

• 假设你的初始状态大概是这样的（包含用户数据和进度字段）：

  const initialState = {
    user: null, // 初始无用户数据
    progress: 0, // 初始进度为0
    // 你也可以加其他字段，比如loading: false、error: null之类的
  };
  

• 你的成功action结构应该是这样的（从API拿到数据后触发）：

  {
    type: 'FETCH_USER_SUCCESS',
    payload: {
      user: { id: 123, name: 'Blankman', email: 'xxx@xxx.com' }, // API返回的用户JSON
      progress: 100 // 进度值，比如100代表获取完成
    }
  }
  

接下来分两种常用写法给你演示：

方法1：使用Object.assign（兼容旧环境） #

Object.assign的作用是把多个对象的属性合并到一个新对象里，必须以空对象{}作为第一个参数，这样才不会修改原状态：

function userReducer(state = initialState, action) {
  switch (action.type) {
    case 'FETCH_USER_SUCCESS':
      // 先创建空对象，复制原状态的所有属性，再覆盖需要更新的字段
      return Object.assign({}, state, {
        user: action.payload.user,
        progress: action.payload.progress
      });
    default:
      // 其他action直接返回原状态，绝对不能修改它
      return state;
  }
}

这里的逻辑是：Object.assign({}, state)先完整复制了原状态的所有属性，然后后面的对象会把user和progress替换成新值，最终返回的是一个全新的状态对象，原状态完全没被改动。

方法2：使用ES6扩展运算符（更简洁推荐） #

现在大部分项目都支持ES6语法，扩展运算符...可以更直观地复制原状态的属性，写法更清爽：

function userReducer(state = initialState, action) {
  switch (action.type) {
    case 'FETCH_USER_SUCCESS':
      // 展开原状态的所有属性，然后覆盖user和progress字段
      return {
        ...state,
        user: action.payload.user,
        progress: action.payload.progress
      };
    default:
      return state;
  }
}

这个写法和Object.assign的效果完全一样，但可读性更强，现在是Redux官方推荐的写法。

关键注意点 #

• 绝对不能直接修改原状态：比如绝对不能写state.user = action.payload.user或者state.progress = 100，这样会直接突变原状态，Redux无法检测到状态变化，组件也不会重新渲染。
• 如果你的用户对象是嵌套结构（比如user.address.city），更新嵌套字段时也要保持不可变性：比如要修改用户的城市，不能直接改state.user.address.city，而是要创建新的user和address对象：

  // 示例：更新用户城市
  return {
    ...state,
    user: {
      ...state.user, // 复制原用户的所有属性
      address: {
        ...state.user.address, // 复制原地址的所有属性
        city: 'New York' // 替换新城市
      }
    }
  };
  

不过你的场景是直接替换整个user对象，所以不需要处理嵌套更新，直接赋值API返回的用户JSON就行。

总的来说，核心思路就是：创建新状态对象，复制原状态的所有内容，只更新需要改变的字段，这样就完美遵守了Redux的不可变状态原则。

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