使用javascript解构功能重新分配变量的值

Question

const authReducer =(state= defaultState, action)=>{
    //const {email,firstname,lastname,phone,token} = action.data;
    switch(action.type){
        
        case 'LOGIN': 
        let {email,firstname,lastname,phone,token} = action.data;
        return {...state, email, firstname, lastname, phone, token, authenticated: true };

        case 'REGISTER':
        {email,firstname,lastname,phone,token} = action.data;
        return {...state, email, firstname, token, authenticated: true };

        case 'LOGOUT':
            return defaultState;

         default:
             return state;   
    }
}

使用上面的代码将引发错误：

 Parsing error: Unexpected token

有没有一种方法可以根据切换的情况来分解action.data来声明变量email，firstname，lastname ...？

如果我尝试像这样在switch块之前声明值：

/* ... */
const authReducer =(state= defaultState, action)=>{
    const {email,firstname,lastname,phone,token} = action.data;
    switch(action.type){

        case 'LOGIN': 
        //let {email,firstname,lastname,phone,token} = action.data;
        return {...state, email, firstname, lastname, phone, token, authenticated: true };

        case 'REGISTER':
        //{email,firstname,lastname,phone,token} = action.data;
        return {...state, email, firstname, token, authenticated: true };

        case 'LOGOUT':
            return defaultState;

         default:
             return state;   
    }
}

export default authReducer;

我收到错误：

TypeError: Cannot destructure property 'email' of 'action.data' as it is undefined.

Answer 1

关于您的第一个错误：在REGISTER情况下，您缺少声明关键字：

case 'REGISTER':
        // {email,firstname,lastname,phone,token} = action.data;
        const {email,firstname,lastname,phone,token} = action.data;

关于第二个错误：对于某些操作，未定义字段action.data，因此您无法对其进行解构。保持第一种解构每个案例的动作的方法。

Answer 2

像这样合并将达到目的吗？但前提是所有属性都在action.data中。

const action = { type: "LOGIN", data: {email: "mail", firstname: "pete", lastname: "black", phone: "00021121", token: "12345"} };
const defaultState = {x: false};
const authReducer = (state= defaultState, action)=> {
    const {email,firstname,lastname,phone,token} = action.data;
    switch(action.type){
        case 'LOGIN': 
        //let {email,firstname,lastname,phone,token} = action.data;
        return {...state, ...{ email, firstname, lastname, phone, token, authenticated: true }  };

        case 'REGISTER':
        //{email,firstname,lastname,phone,token} = action.data;
        return {...state, ...{email, firstname, token, authenticated: true} };

        case 'LOGOUT':
            return defaultState;

         default:
             return state;
    }
}

console.log(`LOGIN:\n`, authReducer(defaultState, action));
action.type = "REGISTER";
console.log(`REGISTER:\n`, authReducer(defaultState, action));

.as-console-wrapper { top: 0; max-height: 100% !important; }