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?

it seems like you are trying to update reducer before getting API data or you don't or pages does not exists in your response — Abu Sufian
– Abu Sufian, Commented Jul 20, 2020 at 14:56
pages do exist in the response because if i just set pages:pages, it will get the values, but it overwrites it and i want to update it with previous results — Besart Marku
– Besart Marku, Commented Jul 20, 2020 at 15:14
then category does not exists in the state (state[category])that you are searching at first time ! — Abu Sufian
– Abu Sufian, Commented Jul 20, 2020 at 15:15

Ahmed Mokhtar · Accepted Answer · 2020-07-20 17:05:16Z

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,
      },
};

answered Jul 20, 2020 at 17:05

Ahmed Mokhtar

2,5161 gold badge12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Besart Marku Over a year ago

thank you very much. it worked. just had to change [category]: state[category] ? { ...

Ahmed Mokhtar Over a year ago

I'm glad that helped.

Collectives™ on Stack Overflow

update dynamic object in redux using spread operator

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related