For example, in props I have an object called 'user' that is set to:

user = { id: 1, 
         name: jim, 
         email: [email protected], 
         entries: 4,
         joined: 07-16-2018
       }

I want to have the UPDATE_USER_ENTRIES action dispatch updates only to the user.entries using the payload

What I have for my current reducer function is this:

export const loadUserData = (state = initialStateUser, action = {}) => {
    switch(action.type) {
        case LOAD_USER:
            return Object.assign({}, state, { 
                user: { 
                    id: action.payload.id, 
                    name: action.payload.name, 
                    email: action.payload.email, 
                    entries: action.payload.entries, 
                    joined: action.payload.joined 
                }
            });
        case UPDATE_USER_ENTRIES:
            return {...state, **// NEED HELP HERE** };
        default:
            return state;
    }
}

What is the proper way of writing the return in order to return a new user object with just the entries properties updated? Thanks!

For example, in props I have an object called 'user' that is set to:

user = { id: 1, 
         name: jim, 
         email: [email protected], 
         entries: 4,
         joined: 07-16-2018
       }

I want to have the UPDATE_USER_ENTRIES action dispatch updates only to the user.entries using the payload

What I have for my current reducer function is this:

export const loadUserData = (state = initialStateUser, action = {}) => {
    switch(action.type) {
        case LOAD_USER:
            return Object.assign({}, state, { 
                user: { 
                    id: action.payload.id, 
                    name: action.payload.name, 
                    email: action.payload.email, 
                    entries: action.payload.entries, 
                    joined: action.payload.joined 
                }
            });
        case UPDATE_USER_ENTRIES:
            return {...state, **// NEED HELP HERE** };
        default:
            return state;
    }
}

What is the proper way of writing the return in order to return a new user object with just the entries properties updated? Thanks!

• javascript
• reactjs
• redux
• react-redux

Share Improve this question Follow asked Jul 17, 2018 at 1:37 kayqkayq 13333 silver badges1212 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

You can use spread operator like so:

If your state is like:

state = {
     foo: "bar",
     user: {
         id: 1, 
         name: "jim", 
         email: "[email protected]", 
         entries: 4,
         joined: "07-16-2018",
    }
}

the code below, spread the state, do not touch foo, spread state's user, update the entries property.

case UPDATE_USER_ENTRIES:
    return {...state, user: {...state.user, entries: action.payload } };

If your state looks like:

user: {
         id: 1, 
         name: "jim", 
         email: "[email protected]", 
         entries: 4,
         joined: "07-16-2018",
    }

the above code spreads the state, which is user only, then updates the entries property.

case UPDATE_USER_ENTRIES:
    return {...state, entries: action.payload };

Your payload is holding just one value: userEntries hence it is only equal to userEntries. So in your reducer you need to use it according to this: action.payload Your payload is not an object which holds a userEntries value.