update dynamic object in redux using spread operator

Question

I am trying to update an object in redux using spread operator but I am not being able to. Initial state is an empty object because category is received dynamically from api call.
pages and data are both objects which i want to update using spread operator (or whatever works best)

 state = {
      [category]: {
        pages: {
          key: value(array)
        },
        data: {
          key: value(array)
        }
      }
    }

At my reducer I try to update it like this

 return {
        ...state,
        [category]: {
          ...state[category],
          pages: { ...state[category].pages, pages },
          data: { ...state[category].data, doctors },
          total: total,
        },
      };

but i get "error: TypeError: Cannot read property 'pages' of undefined"

What am I doing wrong and how can I update them correctly?

Answer 1

Because state.category is undefined when you fetch this category for the first time. You can fix it like that:

return {
  ...state,
  [category]: state.category
    ? {
        ...state[category],
        pages: { ...state[category].pages, pages },
        data: { ...state[category].data, doctors },
        total: total,
      }
    : {
        pages,
        data: doctors,
        total,
      },
};