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

huangapple go评论78阅读模式
英文:

How to destructure dynamically from action.payload in Redux Toolkit?

问题

I go through the Redux Toolkit Docs to update mutable object values.

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 }
    }
  }
)

The above code works as expected without any error, but I want to destructure dynamically, instead of manually destructuring the action.payload.

const { emailID, firstName, confirmPassword } = action.payload
英文:

I go through the Redux Toolkit Docs to update mutable object values.

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 }
    }
  }
)

The above code works as expected without any error, but I want to destructure dynamically, instead of manually destructuring the action.payload.

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

答案1

得分: 1

你可以使用扩展语法来展开或“扩展”payload对象的属性到新的状态对象引用。

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

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

有些人可能会说这会降低可读性,因为无法清楚地知道最终的状态值将是什么,因为整个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;
    },
  },
);
英文:

You can use the Spread Syntax to expand, or "spread", the payload object properties into the new state object reference.

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

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

Some may say this hurts readability in terms of it not be clear what exactly will be the resultant state value since the entire payload is shallow copied, and by shallow copying you aren't really using a mutable update RTK allows. In many cases you will want to be explicit with the state update.

Example:

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;
    },
  },
);

huangapple
  • 本文由 发表于 2023年4月11日 03:50:01
  • 转载请务必保留本文链接:https://go.coder-hub.com/75980240.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定