Merge array object elements with same key in Redux reducer

Question

My reducer is as follows:

    export const favorites = (state = {
    favorites: [],
    countFavorite: [],
    }, action) => {
        switch (action.type) {
            case ActionTypes.ADD_FAVORITE:
                return { ...state, favorites: action.payload };

        case ActionTypes.COUNT_FAVORITE:
            return { ...state, countFavorite: [...state.countFavorite, action.payload] };
        default:
            return state;
    }
};

currents I get the following with the old state and the new state:

I would like for the new object to override the existing object with the same key in the array, any help would be very appreciated

score 1 · Accepted Answer · answered Dec 31 '19 at 06:50

The first, you should check the key exists, then add more item:

switch (action.type) {
    case ActionTypes.ADD_FAVORITE:
        return { ...state, favorites: action.payload };

    case ActionTypes.COUNT_FAVORITE: {
        let key = Object.keys(action.payload)[0];
        return { ...state, countFavorite: [...state.countFavorite.filter(fa => Object.keys(fa)[0] !== key), action.payload] };
    }
    default:
        return state;
}

score 0 · Answer 2 · answered Dec 31 '19 at 06:43

In this case, you need to use Array.filter to only filter the object that is the same ID as the one in your action.payload out from the array, and then fill in the action.payload.

That should look like this.

case ActionTypes.COUNT_FAVORITE:
  return { ...state, countFavorite: [ ...state.countFavorite.filter( fav => fav.id !== action.payload.id ), action.payload] };

You can replace the ID with any unique identifier within the object. This way you can omit out the object that you want to replace with the newer one.

Merge array object elements with same key in Redux reducer

2 Answers2