Question

我试图在获取后以defaultUser作为默认状态保存用户信息。但是，如果用UPDATEUSERSTATE更改用户状态，则defaultUser也会更改。我不明白那行为

首先从restApi获取数据
在MainComponent上更新用户状态

如果用户更改ModalView上的文本输入，则更新用户状态。

      const userReducer = (state = {} ,action) => {
      switch (action.type) {
      case actionTypes.GETUSERINFOBYUSERNAME_SUCCESS:
           return {
                    ...state,
                    isFetching: action.isFetching,
                    error: action.error,
                    user: action.user,
                    defaultUser:action.user,
                    open: true
                };
     case actionTypes.UPDATEUSERSTATE:
              return {
                ...state,          
                user: action.user         
              }
      default:
            console.log("[userReducer]: defalt state");
            return state;      
      }            
    };    
//ACTIONS
 export const getUserInfoByUserNameSuccess=(user) => {
        return {type: actionTypes.GETUSERINFOBYUSERNAME_SUCCESS, isFetching: true, error: null, user: user}
    }    
    export const updateUserState=(user) => {
        return {type: actionTypes.UPDATEUSERSTATE, user:user}
    }    
//CALLING GETUSERINFO
 this.props.onGetUserInfoByUserName(val);    
const mapDispatchToProps = dispatch => {
      return{
          onGetUserInfoByUserName : userName => dispatch(getUserInfoByUserNameFetching(userName))
      };
    };
//AND CALLING UPDATEUSERSTATE
textChangedHandler = (key,value) => {
     let user = this.props.user;
     user[key]=value;
    this.props.onUpdateUserState(user);
    }    
 const mapDispatchToProps = dispatch => {
           return{
            onUpdateUserState : (user) => dispatch(updateUserState(user))
        };
      };

Answer 1

这里的问题是，您直接将两个单独的对象的值设置为引用同一对象（user和defaultUser都被设置为引用对象action.user）。因此，如果您更改一个对象的值，则引用也会更改，从而更改第二个对象。

Redux不会用新对象替换该对象，而是会复制新值的浅表。有关示例，请参见以下代码段：

var actionUser = { foo: 1 }
var defaultUser = actionUser
var user = actionUser

user.bar = 2

console.log(actionUser)
// { foo: 1, bar: 2 }

console.log(defaultUser)
// { foo: 1, bar: 2 }

console.log(user)
// { foo: 1, bar: 2 }

要解决此问题，您可以使用Object.assign()方法将引用分配给新对象。请参见以下代码段：

var actionUser = { foo: 1 }
var defaultUser = Object.assign({}, actionUser)
var user = Object.assign({}, actionUser)

user.bar = 2

console.log(actionUser)
// { foo: 1 }

console.log(defaultUser)
// { foo: 1 }

console.log(user)
// { foo: 1, bar: 2 }

因此，每当您将操作中的新值分配给任何状态对象时，请使用Object.assign()。

示例（来自您的代码）：

case actionTypes.GETUSERINFOBYUSERNAME_SUCCESS:
           return {
                    ...state,
                    user: Object.assign({}, action.user),
                    defaultUser: Object.assign({}, action.user),
                };
case actionTypes.UPDATEUSERSTATE:
           return {
                ...state,          
                user: Object.assign({}, action.user),       
              }

当一个对象的状态改变时，另一个对象的状态也发生变化

1 个答案: