reactjs - 更新Reducer React Redux 中的嵌套状态

标签 reactjs redux state immutability reducers

我正在使用 redux 和 Reactjs。这是我的 reducer 状态:

{
 XSAUZHNAKZJ : //id User
  {
   AZRAERAZEAZ : //id Conversation - always one object 
    {
     timestamp : 123123123,
     lastMessage : "hello"
    }
  },
 BLZEJARNAELKR : //id User
  {
   AANALZKJAZ : //id Conversation - always one object
    {
     timestamp : 123123123,
     lastMessage : "hello"
    }
  }
}

我想更新reducer并在lastMessage之后添加一个键/值('name':joe)。我的 action.payload 中有名称值(例如:joe)和 id 用户(例如:XSAUZHNAKZJ)。这是我的代码,但似乎我做得不对。

export default function(state={},action){
  switch(action.type){
    case 'GET_USER_INFO':
      var tempState = Object.assign({}, state);
      var conversation = tempState[action.payload.key];
      var conversationDetail = conversation[Object.keys(conversation)[0]];
      conversationDetail['name']=action.payload.val().name;
      return tempState;
    default:
      return state;
  }
}

最佳答案

利用不变性助手将新对象分配给嵌套状态

import update from 'immutability-helper';

export default function(state={},action){
  switch(action.type){
    case 'GET_USER_INFO':
         return update(state, {
             [action.payload.key]: {
                   [Object.keys(state[action.payload.key])[0]]: {
                          $merge: {name: action.payload.name}
                   }
             }
         })
    default:
      return state;
  }
}

关于reactjs - 更新Reducer React Redux 中的嵌套状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42840812/

相关文章:

reactjs - 使用 Apollo Client 动态设置 React 组件的 GraphQL 查询

reactjs - ES7 中的类装饰器

javascript - 使用 localstorage Redux + Next.js 加载初始状态

javascript - React Material UI 复选框 : How to check/uncheck other boxes in group by checking a different box?

javascript - React 的 IE 11 问题

reactjs - 使用 Material ui 的图片库和对话框

ReactJS redux 订阅语句

javascript - 在 redux 中添加多个对象到 store

android - 弹出第二页后如何刷新主页?

c# - 使用 Bootstrap 回发后恢复选定的选项卡