Last active
October 8, 2024 17:33
-
-
Save markerikson/ad319fd7b04bd4eecdcfe7bf51dce7b1 to your computer and use it in GitHub Desktop.
Nested `createEntityAdapter` example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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"}, | |
} | |
} | |
} | |
} | |
} | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@rickysullivan-gallagher I'm not actually sure what you're trying to do there, and this gist isn't a great place to provide support :) Could you drop by the
#redux
channel in the Reactiflux Discord ( https://www.reactiflux.com ) and ask there?