reactjs - 无法在 Redux 中更新对象而不覆盖它或丢失状态中的其他项目

Question

简要概述..

我的状态如下所示：

isAuthenticated: true

user: {
  avatar: 'avatar.jpg'
  name: 'John Doe'
  username: 'johndoe'
  id: '6dHjStye45fds885'        
}

而且我试图只在减速器中更新avatar属性Redux，但我尝试过的任何东西都没有按预期工作。我一定做错了，但我只是不知道是什么。我已经阅读了有关该主题的尽可能多的内容，但似乎没有任何工作正常。

如果我这样做：

return {
   ...state,
     user: {
       ...state.user,
       avatar: action.payload
     }
};

它完全清除并仅用化身isAuthenticated替换对象，破坏之前状态下的所有其他东西。user我想我正在用avatar: action.payload?

如果这样做：

return {
  ...state,
    ...state.user,
    avatar: action.payload
};

它也清除了isAuthenticated，但这次将所有用户数据（包括 new avatar）置于状态的顶层（不再在对象中）。

有人可以告诉我哪里出错了吗？

编辑添加相关文件

authReducer.js（截断删除不相关的代码）

import isEmpty from '../../functions/isEmpty';
import { SET_CURRENT_USER, SET_AVATAR } from '../actionTypes';

const initialState = {
  isAuthenticated: false,
  user: {}
};

export default function(state = initialState, action) {
  switch (action.type) {
    case SET_CURRENT_USER:
      return {
        ...state,
        isAuthenticated: !isEmpty(action.payload),
        user: action.payload
    };
    case SET_AVATAR:
      return {
        ...state,
          user: {
            ...state,
            avatar: action.payload
          }
      };
    default:
      return state;
  }
}

rootReducer.js

import { combineReducers } from 'redux';
import authReducer from './reducers/authReducer';
import errorReducer from './reducers/errorReducer';

export default combineReducers({
  auth: authReducer,
  errors: errorReducer
});

store.js

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './rootReducer';

const initialState = {};

const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

export default store;

标签： reactjsreduxstatereducers

Answer 1

更改authReducer.js文件中的代码，

由此

case SET_AVATAR:
  return {
    ...state,
      user: {
        ...state,
        avatar: action.payload
      }
  };

对此

case SET_AVATAR:
  return {
    ...state,
      user: {
        ...state.user,
        avatar: action.payload
      }
  };

或这个

case SET_AVATAR:
  return {
    isAuthenticated: state.isAuthenticated,
    user: {
      ...state.user,
      avatar: action.payload
    },
  };