如何在Redux Toolkit中动态解构action.payload？

你的代码当前通过手动解构action.payload的属性来更新状态，但其实完全不需要手动指定每个属性，有两种更简洁的动态实现方式：

方法1：直接对象展开合并 #

既然你已经在返回新的状态对象，直接用对象展开运算符把action.payload的所有属性合并到现有状态即可，无需手动解构：

const errSignupSlice = createSlice({
  name: 'signupError',
  initialState: {
    firstName: "",
    lastName: "",
    emailID: "",
    password: "",
    confirmPassword: "",
    phoneNo: "",
  },
  reducers: {  
    addSignupError: (state, action) => {
      console.log('SLICES STARTED')
      console.log(action.payload)
      // 直接合并payload的所有属性到state，自动覆盖对应字段
      return { ...state, ...action.payload }
    }
  }
})

方法2：利用Immer进行可变更新 #

Redux Toolkit内置Immer，允许你直接"修改"state（实际由Immer转换为不可变更新），可以遍历action.payload的键值对动态赋值：

const errSignupSlice = createSlice({
  name: 'signupError',
  initialState: {
    firstName: "",
    lastName: "",
    emailID: "",
    password: "",
    confirmPassword: "",
    phoneNo: "",
  },
  reducers: {  
    addSignupError: (state, action) => {
      console.log('SLICES STARTED')
      console.log(action.payload)
      // 遍历payload的所有键值对，动态更新state对应字段
      Object.entries(action.payload).forEach(([key, value]) => {
        state[key] = value;
      });
      // 这里不需要return，Immer会自动处理状态更新
    }
  }
})

两种方法都能实现动态处理任意action.payload中的属性，无需手动解构指定字段，完全适配你需要的动态更新需求。

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