Reputation: 4336
I have a todosSlice.
Its items are stored as Record<string, TODO>.
export const todosSlice = createAppSlice({
name: "todos",
initialState,
reducers: create => ({
updateTodo: create.reducer((state, action: PayloadAction<Todo>) => {
return {
...state,
items: { ...state.items, [action.payload.id]: action.payload },
}
}),
}),
A list component takes a list of item ids and and maps each id to an item components (as id). I want to extract memoized list of items ids:
const selectToDos = (state: RootState) => {
return state.todos.items
}
const selectToDoIds = createSelector(
[selectToDos], (todos) => {
console.log("recalculating selectToDoIds")
return Object.keys(todos)
}
)
export const TodosList: FC = () => {
const dispatch = useAppDispatch();
const itemIDs = useAppSelector(selectToDoIds);
console.log(itemIDs);
const handleClick = () => {
dispatch(updateTodo({id:"todo1", title: "new title"}))
}
return <>todos<button onClick={handleClick}>Update</button></>;
}
Am I missing something from the docs?
I understand that this way selectToDos() always returns a newly created object. Any ways to deal with it?
I prefer not to use Immer.
Upvotes: 0
Views: 21