如何使用重复嵌套切片构建 Redux + ReduxToolkit 商店？

Question

假设我的状态看起来像这样（取自https://redux.js.org/usage/structuring-reducers/normalizing-state-shape）：

{
    posts : {
        byId : {
            "post1" : {
                id : "post1",
                author : "user1",
                body : "......",
                comments : ["comment1", "comment2"]
            },
            "post2" : {
                id : "post2",
                author : "user2",
                body : "......",
                comments : ["comment3", "comment4", "comment5"]
            }
        },
        allIds : ["post1", "post2"]
    },
    comments : {
        byId : {
            "comment1" : {
                id : "comment1",
                author : "user1",
                comment : ".....",
            },
            "comment2" : {
                id : "comment2",
                author : "user2",
                comment : ".....",
            }
        },
        allIds : ["comment1", "comment2"]
    },
    users : {
        byId : {
            "user1" : {
                username : "user1",
                name : "User 1",
            },
            "user2" : {
                username : "user2",
                name : "User 2",
            }
        },
        allIds : ["user1", "user2"]
    }
}

因此，我使用 Redux-Toolkit 的 createSlice 创建了 3 个切片：postsSlice、cmetsSlice、usersSlice。 这很简单。

但现在我想在状态中添加另一层来跟踪博客，所以上面的整个结构需要为每个博客嵌套和重复：

{
    blogs: {
        byId: {
            "blog1": {
                posts: {...},
                comments: {...},
                users: {...}
            },
            "blog2": {
                posts: {...},
                comments: {...},
                users: {...}
            },
        },
        allIds: ["blog1", "blog2"]
    }
}

现在我需要使用createSlice 创建一个新切片，blogsSlice。但是对于这个切片中的每个博客项目，我需要一个由其他 3 个切片组成的子状态。

如何组合切片/reducer 以实际创建此结构？我应该如何定义传递给createSlice 的初始状态和reducer 函数以使这个结构工作？

Answer 1

我实际上整理了一个要点，展示了与此非常相似的东西，用于概念上的 ChatRoom > ChatMessages 结构。这可能不是您正在寻找的内容，但希望它能让您了解如何构建可作为灵感的事物。

这里粘贴整个sn-p作为例子：

// Example of using multiple / nested `createEntityAdapter` calls 
// within a single Redux Toolkit slice

interface Message {
  id: string;
  roomId: string;
  text: string;
  timestamp: string;
  username: string;
}

interface ChatRoomEntry {
  id: string;
  messages: EntityState<Message>;
}

const roomsAdapter = createEntityAdapter<ChatRoomEntry>();
const messagesAdapter = createEntityAdapter<Message>();

const fetchRooms = createAsyncThunk(
  "chats/fetchRooms",
  chatsAPI.fetchRooms
);

const fetchMessages = createAsyncThunk(
  "chats/fetchMessages",
  async (roomId) => {
    return chatsAPI.fetchMessages(roomId);
  }
)

const chatSlice = createSlice({
  name: "chats",
  initialState: roomsAdapter.getInitialState(),
  reducers: {
  
  },
  extraReducers: builder => {
    builder.addCase(fetchRooms.fulfilled, (state, action) => {
      const roomEntries = action.payload.map(room => {
        return {id: room.id, messages: messagesAdapter.getInitialState()};
      });
      
      roomsAdapter.setAll(state, roomEntries);
    })
    .addCase(fetchMessages.fulfilled, (state, action) => {
      const roomId = action.meta.arg;
      const roomEntry = state.entities[roomId];
      if (roomEntry) {
        messagesAdapter.setAll(roomEntry.messages, action.payload);
      }
    })
  }
})

/*
Resulting state:
{
  ids: ["chatRoom1"],
  entities: {
    chatRoom1: {
      id: "chatRoom1",
      messages: {
        ids: ["message1", "message2"],
        entities: {
          message1: {id: "message1", text: "hello"},
          message2: {id: "message2", text: "yo"},
        }
      }
    }
  }
}
*/