reactjs - 如何在reducer中没有任何id的情况下将数据添加到redux状态数组？

Question

我有这个 reducer :

import { GET_CHAT, ADD_MESSAGE } from '../actions';

export default function (state = null, action) {
switch (action.type) {
    case GET_CHAT:
        return { ...state, [action.meta.id]: action.payload.data };
    case ADD_MESSAGE:
        console.log(state[action.meta.convId].chat.messages)
        return {
            ...state,
            [action.meta.convId]: {
                ...state[action.meta.convId],
                chat: {
                    ...state[action.meta.convId].chat,
                    messages: {
                        ...state[action.meta.convId].chat.messages,
                        action.payload
                    }
                }
            }
        };
    default:
        return state;
}
}

我想将 action.payload 添加到消息数组的末尾。问题是:当我尝试将 key 放入有效负载时，如下所示:

[action.meta._id]:action.payload

Messages 不再是一个数组，而是一个对象。所以我不能再用map()循环它了。而且 redux 不会让我将有效负载直接推送到数组，看来我必须放一个键...... 任何帮助将不胜感激，谢谢:)

Answer 1

如果您希望消息始终是一个数组，那么您的 reducer 应该如下所示:

import { GET_CHAT, ADD_MESSAGE } from '../actions';

export default function (state = null, action) {
  switch (action.type) {
    case GET_CHAT:
       return { ...state, [action.meta.id]: action.payload.data };
    case ADD_MESSAGE:
        console.log(state[action.meta.convId].chat.messages)
        return {
           ...state,
           [action.meta.convId]: {
               ...state[action.meta.convId],
               chat: {
                  ...state[action.meta.convId].chat,
                  messages: [                                //USE SQUARE BRACKETS INSTEAD
                    ...state[action.meta.convId].chat.messages,
                    action.payload
                  ]
               }
          }
        };
    default:
      return state;
    }
}