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

mzillmmw 于 2023-04-12 发布在其他

关注(0)|答案(1)|浏览(93)

我通过Redux Toolkit文档来更新可变对象值。

const errSignupSlice = createSlice({
  name: 'signupError',
  initialState: {
    firstName: "",
    lastName: "",
    emailID: "",
    password: "",
    confirmPassword: "",
    phoneNo: "",
  },
  reducers: {  
    addSignupError: (state, action) => {
            
      console.log('SLICES STARTED')
      console.log(action.payload)

      // action.payload = {
      //   emailID: 'Enter Minimum 6 character, Invalid Email Address',
      //   firstName: 'Enter Minimum 3 character',
      //   confirmPassword: 'confirm password do not match'
      // }

      // how can I de-structure dynamically
      const { emailID, firstName, confirmPassword } = action.payload
            
      return { ...state, emailID, firstName, confirmPassword }
    }
  }
)

上面的代码按预期工作，没有任何错误，但我想动态解构，而不是手动解构action.payload。

const { emailID, firstName, confirmPassword } = action.payload

redux

来源：https://stackoverflow.com/questions/75980240/how-to-destructure-dynamically-from-action-payload-in-redux-toolkit

1条答案

按热度按时间

i86rm4rw1#

您可以使用Spread Syntax将payload对象属性扩展或“散布”到新的状态对象引用中。

const initialState = {
  firstName: "",
  lastName: "",
  emailID: "",
  password: "",
  confirmPassword: "",
  phoneNo: "",
};

const errSignupSlice = createSlice({
  name: 'signupError',
  initialState,
  reducers: {  
    addSignupError: (state, action) => {
      return {
        ...state,
        ...action.payload,
      };   
    },
  },
);

有些人可能会说，这会损害可读性，因为不清楚结果状态值是什么，因为整个有效负载是浅复制的，并且通过浅复制，您并没有真正使用RTK允许的可变更新。在许多情况下，您会希望显式地更新状态。
示例：

const initialState = {
  firstName: "",
  lastName: "",
  emailID: "",
  password: "",
  confirmPassword: "",
  phoneNo: "",
};

const errSignupSlice = createSlice({
  name: 'signupError',
  initialState,
  reducers: {  
    addSignupError: (state, action) => {
      const { emailID, firstName, confirmPassword } = action.payload;
      state.firstName = firstName;
      state.emailID = emailID;
      state.confirmPassword = confirmPassword;
    },
  },
);

赞(0）回复(0）举报 2023-04-12

我来回答

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

1条答案

相关问题

热门标签

最新问答