lvil
lvil

Reputation: 4336

Redux Items updating by id

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

Answers (0)

Related Questions