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

电流我得到以下与旧状态和新状态：

我希望新对象用数组中的相同键覆盖现有对象，非常感谢任何帮助

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 中的 ID 相同的对象，然后填写 action.payload。

应该是这样的。

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

您可以将 ID 替换为对象内的任何唯一标识符。这样，您可以省略要替换为较新对象的对象。