javascript - 如何让我的 reducer 更新状态中对象的一个​​属性？

Question

例如，在 props 中我有一个名为“user”的对象，它被设置为:

user = { id: 1, 
         name: jim, 
         email: jim@gmail.com, 
         entries: 4,
         joined: 07-16-2018
       }

我想让 UPDATE_USER_ENTRIES 操作使用有效负载仅向 user.entries 发送更新

我目前的 reducer 函数是这样的:

export const loadUserData = (state = initialStateUser, action = {}) => {
    switch(action.type) {
        case LOAD_USER:
            return Object.assign({}, state, { 
                user: { 
                    id: action.payload.id, 
                    name: action.payload.name, 
                    email: action.payload.email, 
                    entries: action.payload.entries, 
                    joined: action.payload.joined 
                }
            });
        case UPDATE_USER_ENTRIES:
            return {...state, **// NEED HELP HERE** };
        default:
            return state;
    }
}

为了返回一个只更新了条目属性的新用户对象，正确的编写方法是什么？谢谢!

Answer 1

您可以像这样使用展开运算符:

如果你的状态是这样的:

state = {
     foo: "bar",
     user: {
         id: 1, 
         name: "jim", 
         email: "jim@gmail.com", 
         entries: 4,
         joined: "07-16-2018",
    }
}

下面的代码，传播状态，不要触摸foo，传播状态的user，更新entries属性。

case UPDATE_USER_ENTRIES:
    return {...state, user: {...state.user, entries: action.payload } };

如果你的状态是这样的:

user: {
         id: 1, 
         name: "jim", 
         email: "jim@gmail.com", 
         entries: 4,
         joined: "07-16-2018",
    }

上面的代码传播状态，这只是user，然后更新entries属性。

case UPDATE_USER_ENTRIES:
    return {...state, entries: action.payload };

您的负载只有一个值:userEntries 因此它只等于 userEntries。因此，在您的 reducer 中，您需要根据以下内容使用它:action.payload 您的有效载荷不是一个包含 userEntries 值的对象。