How to update only one value in nested array of Redux state?

Question

Consider the following state:

const initState = {
    id: {
        data: null, 
        isFetching: false, 
        fetchingError: null
    },  
    bookmarks: {
        IDs: {
            news: [], 
            opps: [],
            posts: []           
        },
        data: {
            news: [], 
            opps: [],
            posts: []
        },      
        isFetching: false, 
        fetchingError: null
    },
    role: null,
    membership: null,   
}

How do I update just the posts array in the ÌDs array in the bookmarks array? I tried this:

case 'SET_USER_BOOKMARKED_POSTS':
    return {
        ...state, 
        bookmarks: {
            IDs: {
                posts: action.payload
            }
        }
    }

But when I log the state to the console the IDs array then only contains posts, while the opps and news arrays are not there anymore.

ilsotov · Accepted Answer · 2018-04-12 16:41:48Z

2

You need to destruct all inner structure:

case 'SET_USER_BOOKMARKED_POSTS':
    return {
        ...state, 
        bookmarks: {
            ...state.bookmarks,
            IDs: {
                ...state.bookmarks.IDs,
                posts: action.payload
            }
        }
    }

But this is not very convinient, better use lodash merge

answered Apr 12, 2018 at 16:41

ilsotov

1621 silver badge9 bronze badges

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

Comments

Abhishek Gupta · Accepted Answer · 2018-04-12 16:41:25Z

2

You need use the spread operator for state.bookmarks.IDs also as when specifies keys after the spread operator, the value for the keys are overwritten.

case 'SET_USER_BOOKMARKED_POSTS':
return {
    ...state, 
    bookmarks: {
        ...state.bookmarks
        IDs: {
            ...state.bookmarks.IDs,
            posts: action.payload
        },   
    }
}

answered Apr 12, 2018 at 16:41

Abhishek Gupta

1,32713 silver badges28 bronze badges

Comments

Sterling Archer · Accepted Answer · 2018-04-12 16:44:17Z

0

The way we do it is a non-mutative method using Object.assign to basically point and update a field in the redux state. Something like:

return Object.assign({}, state.bookmarks, {
    IDs: action.payload,
});

This will make sure you're not mutating the state, and returns the new bookmarks. You can adjust this to return the entire state if you'd like, it depends on if you need the other data on the update.

answered Apr 12, 2018 at 16:44

Sterling Archer

22.5k19 gold badges86 silver badges121 bronze badges

Collectives™ on Stack Overflow

How to update only one value in nested array of Redux state?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related