Redux Toolkit：如何規范群聊消息？

Question

我有一組從服務器返回的消息，其中每個聊天消息都具有以下格式：

export interface ChatMessage {
  _id: string | number;
  text: string;
  createdAt: Date | number;
  user: ChatUser;
  groupId: number;
}

interface ChatUser {
  _id: string | number;
  name: string;
}

我想通過 groupId 規范化消息列表，然后通過嵌套在內部的消息 Id 來實現如下目的：

 const messages = { ids: ['group1', 'group2'], entities: { group1: { ids: ['msg1', 'msg2'], msg1: {}, msg2: {}, }, group2: { ids: ['msg3', 'msg4'], msg3: {}, msg4: {}, }, };

如何使用createEntityAdapter或normalizr庫來實現？

Answer 1

如果狀態設計得當，我認為可以使用選擇器完成繁重的工作。 我會嘗試這樣的事情：

const initialState = {
    messages: {}, // messages by id

    // map groupIds to an object with messageIds and their createdAt timestamp
    groups: {
        /* Example:
        groupId1: { messageId1: '2022-05-23', messageId2: '2022-05-22'}
        */
    },
    users: {}, // users by id
};

chatMessagesFromServer.forEach(message => {
    const { user } = message;

    // Save message by id, but only with a reference to the userId
    const normalizedMessage = { ...message, userId: user._id };
    delete normalizedMessage.user;
    state.messages[message._id] = normalizedMessage;

    // Associate groups with messages
    if (state.groups[message.groupId]) {
        state.groups[message.groupId][message.id] = message.createdAt;
    } else {
        state.groups[message.groupId] = { [message.id]: message.createdAt };
    }

    // Save user by id
    state.users[user._id] = user;
});

例如，按時間順序檢索一組中的所有消息是一個記憶選擇器的教科書示例，它訪問state.groups以獲取消息 ID，然后使用來自state.messages的消息數據豐富該 ID 列表。