Объединить элементы объекта массива с одинаковым ключом в Redux reducer

Question

Мой редуктор выглядит следующим образом:

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

токи я получаю следующее со старым состоянием и новым состоянием:

h ttps:https://stackru.com/images/1c011b160e758f4d37b0d021915de10c377b356e.png

Я хотел бы, чтобы новый объект переопределил существующий объект с тем же ключом в массиве, любая помощь будет очень признательна

Answer 1

Во-первых, вы должны проверить, существует ли ключ, а затем добавить еще элемент:

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

Answer 2

В этом случае вам нужно использовать Array.filter, чтобы отфильтровать из массива только объект, имеющий тот же идентификатор, что и в вашем action.payload, а затем заполнить action.payload.

Это должно выглядеть так.

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

Вы можете заменить идентификатор любым уникальным идентификатором в объекте. Таким образом, вы можете опустить объект, который хотите заменить на более новый.