堆栈内存溢出
  简体   繁体   English

Redux 更新嵌套 object

[英]Redux update nested object

 原文  2020-10-09 01:15:27  7   1    javascript/ reactjs/ react-redux

问题描述

I can't figure out how to update an array inside my object using a Redux reducer.我不知道如何使用 Redux reducer 更新我的 object 中的数组。 I have been searching for quite a while, looked at the Redux docs, and the code I wrote looks like the ones I saw there, but it just doesn't work properly for some reason.我已经搜索了很长时间，查看了 Redux 文档，我写的代码看起来和我在那里看到的一样，但由于某种原因它不能正常工作。

My state before the update looks like this:更新前我的 state 是这样的：

{
  groups: {
    groups: [
      {
        _id: '5f7f5a3097d3b6a8e49086a5',
        name: 'asd3',
        avatar_color: '#ffffff',
        avatar_bgcolor: '#000000'
      },
      {
        _id: '5f7f5a4397d3b6a8e49086a6',
        name: 'asd fgh',
        avatar_color: '#000000',
        avatar_bgcolor: '#ffffff'
      }
    ],
    currentGroup: {
      _id: '5f7f5a3097d3b6a8e49086a5',
      messageCount: 10,
      messages: [
        {
          _id: '5f7f99b262657b148406cad5',
          sender: '5f699fffc51562181fe52879',
          type: 'text',
          message: 'test message 0',
          createdAt: '2020-10-08T22:58:58.181Z',
          updatedAt: '2020-10-08T22:58:58.181Z'
        },
        {
          _id: '5f7f99b462657b148406cad6',
          sender: '5f699fffc51562181fe52879',
          type: 'text',
          message: 'test message 1',
          createdAt: '2020-10-08T22:59:00.902Z',
          updatedAt: '2020-10-08T22:59:00.902Z'
        },
        {
          _id: '5f7f99b662657b148406cad7',
          sender: '5f699fffc51562181fe52879',
          type: 'text',
          message: 'test message 2',
          createdAt: '2020-10-08T22:59:02.731Z',
          updatedAt: '2020-10-08T22:59:02.731Z'
        },
        {
          _id: '5f7f99b862657b148406cad8',
          sender: '5f699fffc51562181fe52879',
          type: 'text',
          message: 'test message 3',
          createdAt: '2020-10-08T22:59:04.360Z',
          updatedAt: '2020-10-08T22:59:04.360Z'
        },
        {
          _id: '5f7f99ba62657b148406cad9',
          sender: '5f699fffc51562181fe52879',
          type: 'text',
          message: 'test message 4',
          createdAt: '2020-10-08T22:59:06.052Z',
          updatedAt: '2020-10-08T22:59:06.052Z'
        },
        {
          _id: '5f7f99bb62657b148406cada',
          sender: '5f699fffc51562181fe52879',
          type: 'text',
          message: 'test message 5',
          createdAt: '2020-10-08T22:59:07.870Z',
          updatedAt: '2020-10-08T22:59:07.870Z'
        },
        {
          _id: '5f7fa6090c7e871c1f1d400d',
          sender: '5f699fffc51562181fe52879',
          type: 'text',
          message: 'test message 6',
          createdAt: '2020-10-08T23:51:37.772Z',
          updatedAt: '2020-10-08T23:51:37.772Z'
        },
        {
          _id: '5f7fabf00c7e871c1f1d400f',
          sender: '5f699fffc51562181fe52879',
          type: 'text',
          message: 'test message 7',
          createdAt: '2020-10-09T00:16:48.795Z',
          updatedAt: '2020-10-09T00:16:48.795Z'
        },
        {
          _id: '5f7faee20c7e871c1f1d4010',
          sender: '5f699fffc51562181fe52879',
          type: 'text',
          message: 'test message 8',
          createdAt: '2020-10-09T00:29:22.360Z',
          updatedAt: '2020-10-09T00:29:22.360Z'
        },
        {
          _id: '5f7faf8f0c7e871c1f1d4011',
          sender: '5f699fffc51562181fe52879',
          type: 'text',
          message: 'test message 9',
          createdAt: '2020-10-09T00:32:15.747Z',
          updatedAt: '2020-10-09T00:32:15.747Z'
        }
      ]
    }
  }
}

I'm trying to add a message to the messages array inside the currentGroup object.我正在尝试向 currentGroup object 内的消息数组添加一条消息。

I tried the following code for my reducer:我为我的减速器尝试了以下代码：

case ADD_CHAT_MESSAGE:
    return {
        ...state,
        currentGroup: {
            ...state.currentGroup,
            messages: [...state.currentGroup.messages, action.payload]
        }
    };

When I run this, the contents of currentGroup get spread inside the messages object (along with the old messages array), then the new message gets added into that inner object's messages array like so:当我运行它时，currentGroup 的内容散布在消息 object 中（连同旧消息数组），然后新消息被添加到该内部对象的消息数组中，如下所示：

{
  groups: {
    groups: [
      {
        _id: '5f7f5a3097d3b6a8e49086a5',
        name: 'asd3',
        avatar_color: '#ffffff',
        avatar_bgcolor: '#000000'
      },
      {
        _id: '5f7f5a4397d3b6a8e49086a6',
        name: 'asd fgh',
        avatar_color: '#000000',
        avatar_bgcolor: '#ffffff'
      }
    ],
    currentGroup: {
      _id: '5f7f5a3097d3b6a8e49086a5',
      messageCount: 10,
      messages: [
        {
          _id: '5f7f99b262657b148406cad5',
          sender: '5f699fffc51562181fe52879',
          type: 'text',
          message: 'test message 0',
          createdAt: '2020-10-08T22:58:58.181Z',
          updatedAt: '2020-10-08T22:58:58.181Z'
        },
        {
          _id: '5f7f99b462657b148406cad6',
          sender: '5f699fffc51562181fe52879',
          type: 'text',
          message: 'test message 1',
          createdAt: '2020-10-08T22:59:00.902Z',
          updatedAt: '2020-10-08T22:59:00.902Z'
        },
        {
          _id: '5f7f99b662657b148406cad7',
          sender: '5f699fffc51562181fe52879',
          type: 'text',
          message: 'test message 2',
          createdAt: '2020-10-08T22:59:02.731Z',
          updatedAt: '2020-10-08T22:59:02.731Z'
        },
        {
          _id: '5f7f99b862657b148406cad8',
          sender: '5f699fffc51562181fe52879',
          type: 'text',
          message: 'test message 3',
          createdAt: '2020-10-08T22:59:04.360Z',
          updatedAt: '2020-10-08T22:59:04.360Z'
        },
        {
          _id: '5f7f99ba62657b148406cad9',
          sender: '5f699fffc51562181fe52879',
          type: 'text',
          message: 'test message 4',
          createdAt: '2020-10-08T22:59:06.052Z',
          updatedAt: '2020-10-08T22:59:06.052Z'
        },
        {
          _id: '5f7f99bb62657b148406cada',
          sender: '5f699fffc51562181fe52879',
          type: 'text',
          message: 'test message 5',
          createdAt: '2020-10-08T22:59:07.870Z',
          updatedAt: '2020-10-08T22:59:07.870Z'
        },
        {
          _id: '5f7fa6090c7e871c1f1d400d',
          sender: '5f699fffc51562181fe52879',
          type: 'text',
          message: 'test message 6',
          createdAt: '2020-10-08T23:51:37.772Z',
          updatedAt: '2020-10-08T23:51:37.772Z'
        },
        {
          _id: '5f7fabf00c7e871c1f1d400f',
          sender: '5f699fffc51562181fe52879',
          type: 'text',
          message: 'test message 7',
          createdAt: '2020-10-09T00:16:48.795Z',
          updatedAt: '2020-10-09T00:16:48.795Z'
        },
        {
          _id: '5f7faee20c7e871c1f1d4010',
          sender: '5f699fffc51562181fe52879',
          type: 'text',
          message: 'test message 8',
          createdAt: '2020-10-09T00:29:22.360Z',
          updatedAt: '2020-10-09T00:29:22.360Z'
        },
        {
          _id: '5f7faf8f0c7e871c1f1d4011',
          sender: '5f699fffc51562181fe52879',
          type: 'text',
          message: 'test message 9',
          createdAt: '2020-10-09T00:32:15.747Z',
          updatedAt: '2020-10-09T00:32:15.747Z'
        },
        {
          members: [
            '5f699fffc51562181fe52879'
          ],
          _id: '5f7f5a3097d3b6a8e49086a5',
          name: 'asd3',
          avatar_color: '#ffffff',
          avatar_bgcolor: '#000000',
          messages: [
            {
              _id: '5f7f99b262657b148406cad5',
              sender: '5f699fffc51562181fe52879',
              type: 'text',
              message: 'test message 0',
              createdAt: '2020-10-08T22:58:58.181Z',
              updatedAt: '2020-10-08T22:58:58.181Z'
            },
            {
              _id: '5f7f99b462657b148406cad6',
              sender: '5f699fffc51562181fe52879',
              type: 'text',
              message: 'test message 1',
              createdAt: '2020-10-08T22:59:00.902Z',
              updatedAt: '2020-10-08T22:59:00.902Z'
            },
            {
              _id: '5f7f99b662657b148406cad7',
              sender: '5f699fffc51562181fe52879',
              type: 'text',
              message: 'test message 2',
              createdAt: '2020-10-08T22:59:02.731Z',
              updatedAt: '2020-10-08T22:59:02.731Z'
            },
            {
              _id: '5f7f99b862657b148406cad8',
              sender: '5f699fffc51562181fe52879',
              type: 'text',
              message: 'test message 3',
              createdAt: '2020-10-08T22:59:04.360Z',
              updatedAt: '2020-10-08T22:59:04.360Z'
            },
            {
              _id: '5f7f99ba62657b148406cad9',
              sender: '5f699fffc51562181fe52879',
              type: 'text',
              message: 'test message 4',
              createdAt: '2020-10-08T22:59:06.052Z',
              updatedAt: '2020-10-08T22:59:06.052Z'
            },
            {
              _id: '5f7f99bb62657b148406cada',
              sender: '5f699fffc51562181fe52879',
              type: 'text',
              message: 'test message 5',
              createdAt: '2020-10-08T22:59:07.870Z',
              updatedAt: '2020-10-08T22:59:07.870Z'
            },
            {
              _id: '5f7fa6090c7e871c1f1d400d',
              sender: '5f699fffc51562181fe52879',
              type: 'text',
              message: 'test message 6',
              createdAt: '2020-10-08T23:51:37.772Z',
              updatedAt: '2020-10-08T23:51:37.772Z'
            },
            {
              _id: '5f7fabf00c7e871c1f1d400f',
              sender: '5f699fffc51562181fe52879',
              type: 'text',
              message: 'test message 7',
              createdAt: '2020-10-09T00:16:48.795Z',
              updatedAt: '2020-10-09T00:16:48.795Z'
            },
            {
              _id: '5f7faee20c7e871c1f1d4010',
              sender: '5f699fffc51562181fe52879',
              type: 'text',
              message: 'test message 8',
              createdAt: '2020-10-09T00:29:22.360Z',
              updatedAt: '2020-10-09T00:29:22.360Z'
            },
            {
              _id: '5f7faf8f0c7e871c1f1d4011',
              sender: '5f699fffc51562181fe52879',
              type: 'text',
              message: 'test message 9',
              createdAt: '2020-10-09T00:32:15.747Z',
              updatedAt: '2020-10-09T00:32:15.747Z'
            },
            {
              _id: '5f7fb03a0c7e871c1f1d4012',
              sender: '5f699fffc51562181fe52879',
              type: 'text',
              message: 'test message 10',
              createdAt: '2020-10-09T00:35:06.025Z',
              updatedAt: '2020-10-09T00:35:06.025Z'
            },
            {
              _id: '5f7fb15c0c7e871c1f1d4014',
              sender: '5f699fffc51562181fe52879',
              type: 'text',
              message: 'test message 10',
              createdAt: '2020-10-09T00:39:56.477Z',
              updatedAt: '2020-10-09T00:39:56.477Z'
            },
            {
              _id: '5f7fb76e0c7e871c1f1d401c',
              sender: '5f699fffc51562181fe52879',
              type: 'text',
              message: 'test message 10',
              createdAt: '2020-10-09T01:05:50.511Z',
              updatedAt: '2020-10-09T01:05:50.511Z'
            }
          ],
          createdAt: '2020-10-08T18:28:00.475Z',
          updatedAt: '2020-10-09T01:05:50.511Z',
          __v: 13
        }
      ]
    }
  }
}

Do you have any tips how to make this work?您有任何提示如何使这项工作吗？ Thank you for your help!谢谢您的帮助！

1 个解决方案

解决方案1
 0  2020-10-09 01:34:29

I decided to refactor the state structure as advised by the comments.我决定按照评论的建议重构 state 结构。 Thank you guys, Based on the reference I got.谢谢大家，根据我得到的参考。 I have to normalize the data so that I can then manipulate it easily without having to deal with nested objects.我必须规范化数据，这样我就可以轻松地操作它而不必处理嵌套对象。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 更新Redux Reducer中的嵌套对象 - Update nested object in Redux reducer 更新 Redux 存储中的嵌套 object - Update nested object within Redux store Javascript Redux更新嵌套对象属性值 - Javascript Redux update nested object property value 更新对象的嵌套数据数组（Redux） - Update nested data arrays of object (Redux) 更新嵌套Redux reducer对象的值 - Update value of nested Redux reducer object REACT REDUX：更新深层嵌套对象中的值 - REACT REDUX: Update value in deep nested object 更新Redux存储中数组中的嵌套对象 - Update nested object in array in a redux store 如何在Redux + React中更新嵌套对象属性？ - How to update nested object property in Redux + React? 使用 Redux 在 React 中更新嵌套的 Object - Update Nested Object in Array in React Using Redux 如何更新由 EntityAdapter redux 组成的嵌套对象？ - how to update a nested object which have made up by EntityAdapter redux?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM