时间戳

首页 > 解决方案 > React Redux Push 嵌套数组中的对象

node.js - React Redux Push 嵌套数组中的对象

问题描述

如何从减速器的连接数组中推送新消息？我试图通过索引找到正确的连接然后推送它，但无法开始工作。连接架构例如：

_id: 3213213,
messages:[...]

消息模式例如：

_id: 123213,
author: '12312321',
body: 'Hi!'

因此需要从连接数组中找到正确的连接，然后将其推送到该连接内的消息数组中

问题代码：

const messagesReducer = (state = [], action) => {
  switch (action.type) {
    case RECIEVE_CONNECTIONS:
      return action.payload;
    case UPDATE_MESSAGES:
      let index = state.findIndex(
      connection => connection._id === action.update.id
      );
      return [...state, state[index].messages.concat(action.update.message)];
   default:
    return state;
   }
};

export default messagesReducer;

标签： node.jsreactjsreduxredux-saga

解决方案

您实际上并没有使用此行更新状态：

return [...state, state[index].messages.concat(action.update.message)];

你实际上是在破坏你的 Redux 状态，因为state它是一个连接列表，在这里你包括了串联的消息列表。

这是一个使您的状态相对不可变的示例（如果您想要完全不变，您还需要克隆所有现有的连接/消息，在此示例中，我只是复制数组）

let index = state.findIndex(
  connection => connection._id === action.update.id
);
const conn = state[index];
const messages = [ ...conn.messages, action.update.message ];
const newState = state.slice();
newState[index] = { ...conn, messages };
return newState;

推荐阅读