Question

我是React和react-redux的新手，在调度和更新状态方面遇到很多麻烦

在服务器响应之后，如果用户通过了身份验证，我将继续执行以下操作

this.props.dispatch(addAuth(logged.user));
this.props.dispatch(updateAvatar(logged.user.avatar))

但是，在我这样做之后，日志是

{type: "AUTHENTICATE", user: "cash"} //(LOGGING ACTION FROM REDUCER)
{isAuth: true, username: "cash", myAvatar: undefined, dispatch: ƒ}

{type: "UPDATE_AVATAR", updateAvatar: "http://www.example.com/1234.jpg"} //(LOGGING ACTION FROM REDUCER)
{isAuth: undefined, username: undefined, myAvatar: undefined, dispatch: ƒ}

这是初始状态

const intialState = {
    isAuth: false,
    username: '',
    myAvatar: ''
};

动作

function addAuth(user){
    return {
        type: 'AUTHENTICATE', 
        user: user.username,
    };

}

function updateAvatar(avatarLink){
    return {
        type: 'UPDATE_AVATAR', 
        updateAvatar: avatarLink
    };
}

减速器

function reducer(state = intialState, action) {
    switch(action.type){
        case 'AUTHENTICATE':
        return {
            isAuth: true,
            username: action.user,
        };
        case 'LOGOUT':
        return {
            isAuth: false
        }
        case 'UPDATE_AVATAR':
        return {
            myAvatar: action.updateAvatar
        };
        default:
            return state;
    }
}

我想要的结果是更新isAuth和用户名，然后像这样更新头像状态

{isAuth: true, username: "cash", myAvatar: undefined, dispatch: ƒ}
{isAuth: true, username: "cash", myAvatar: "http://www.example.com/1234.jpg", dispatch: ƒ}

Answer 1

您将返回一个新对象，但未指定所有属性，而未定义所有属性。

如果要创建旧状态的副本并更改此新对象，Object.assign应该是您要寻找的。根据{{3}}，这应该是您的AUTHENTICATE行动的简化剂：

return Object.assign({}, state, {
    isAuth: true,
    username: action.username
})

如果要复制其他未指定的值，则可以用相同的方式重写其他操作。

来自redux docs的便条：

我们不会改变状态。我们使用Object.assign()创建一个副本。 Object.assign(state, { visibilityFilter: action.filter })也是错误：它将改变第一个参数。您必须提供一个空的对象作为第一个参数。您还可以启用对象传播操作员建议改写{ ...state, ...newState }。

另一调度立即覆盖状态

1 个答案: