Redux 嵌套状态...带有动态键

Question

我的聊天应用程序需要一个状态，我可以在其中跟踪对象

messages.roomId.messageId.payload

其中有效负载将包含消息对象的主体。

目前每当我的新消息进来时，我都有以下减速器

    case 'NEW_MESSAGE':
        return {
            ...state,
             messages: {
                ...state.messages, 
                    [action.roomId]: { //Missing something here.
                        [action.id]:
                            action.payload
                    }
                }
             };

所以我意识到房间 ID 内总是只有一条消息，因为我没有使用 ... 来保持以前的状态..

所以我尝试了以下方法。

    case 'NEW_MESSAGE':
        return {
            ...state,
             messages: {
                ...state.messages, 
                    [action.roomId]: {
                        ...state.messages.[action.roomId], [action.id]: //Giving me error here.
                            action.payload
                    }
                }
             };

出来的错误是

..state.messages.[action.roomId], [action.id]: action.payload

它不接受.[action.roomId]

我应该如何将动态键放在那里以便我的减速器工作？

Answer 1

当您使用方括号表示法时，您不必使用点表示法来访问对象键，您只需编写

...state.messages[action.roomId]

你的完整代码是

case 'NEW_MESSAGE':
    return {
        ...state,
         messages: {
            ...state.messages, 
                [action.roomId]: {
                    ...state.messages[action.roomId], [action.id]: 
                        action.payload
                }
            }
         };