Component not updating on deeply nested redux object

Question

I have a project portion of my app, and users can create events within the project. My redux state is deeply nested, which looks like:

When users create an event, I update state with the following:

case CREATE_PROJECT_TODO:
    const data = [...state.data];
    const index = state.data.findIndex(project => project._id===action.payload.project_id);
    data[index].events = [
        ...data[index].events,
        action.payload  
    ];
    return {
        ...state,
        data
    };

However, my react component isn't updating to reflect the changes. I'm quite sure I'm not mutating state. Is it an issue with deeply nested objects, and react can't detect those changes! Any help would be appreciated!

Guru Hadadi · Accepted Answer · 2020-06-14 15:09:43Z

4

With const data = [...state.data], you are doing a shallow copy.

Use map and update your state. Your state is updated correctly and will trigger the component re-render properly.

case CREATE_PROJECT_TODO:
    const index = state.data.findIndex((project) => project._id === action.payload.project_id)
    const updatedData = state.data.map((item, idx) => {
    if (idx === index) {
        return {
        ...item,
        events: [...item.events, action.payload],
        }
    }
    return item
    })

answered Jun 14, 2020 at 15:09

Guru Hadadi

13.8k2 gold badges18 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

Component not updating on deeply nested redux object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related