reactjs - React + Redux，我如何在reducer的特定属性中添加或省略对象

Question

我有以下减速器：

import {CREATE_CATEGORY, EDIT_CATEGORY, DELETE_CATEGORY, FETCH_CATEGORY, FETCH_CATEGORIES, FETCH_TOP_CATEGORIES} from "../actions/categoriesActionTypes";
import _ from 'lodash';

export default (state = [], action) => {
    switch (action.type) {
        case CREATE_CATEGORY:
        case EDIT_CATEGORY:
        case FETCH_CATEGORY:
            return {
                ...state,
                [action.payload.id]: action.payload
            };

        case DELETE_CATEGORY:
            return _.omit(state, action.payload);

        case FETCH_CATEGORIES:
            return {...state, categories:_.mapKeys(action.payload, 'id')};

        case FETCH_TOP_CATEGORIES:
            return {...state, topCategories: _.mapKeys(action.payload, 'id')};

        default:
            return state;
    }
}

它由两个动作调用，一个FetchTopCategories更新topCategories密钥。获取类别操作获取更新类别键的类别。

当调用、或category 时CREATE，我可以计算出如何从 categories 键中添加或省略类别。EDITFETCHDELETE

状态如下所示：

categories:
{
   topCategories: {[]},
   categories: {[]]
}

我已经从另一个没有像这样的子属性的减速器复制了这个减速器的代码，但我想这样做是为了将所有“类别”相关的东西都保留在同一个减速器中。

我确定我只需要添加一些类似于其余操作类型的代码，FetchCategories但FetchTopCategories我无法确定语法。

我正在尝试做类似的事情：

 case CREATE_CATEGORY:
        case EDIT_CATEGORY:
        case FETCH_CATEGORY:
            return {
                ...state,
                categories:[action.payload.id]: action.payload
            };


    case DELETE_CATEGORY:
        return categories:_.omit(state, action.payload);

标签： reactjsecmascript-6redux

Answer 1

好的，我想我现在已经想通了。

import {CREATE_CATEGORY, EDIT_CATEGORY, DELETE_CATEGORY, FETCH_CATEGORY, FETCH_CATEGORIES, FETCH_TOP_CATEGORIES} from "../actions/categoriesActionTypes";
import _ from 'lodash';

const initState = {
  categories: []
};

export default (state = initState, action) => {
    switch (action.type) {
        case CREATE_CATEGORY:
        case EDIT_CATEGORY:
        case FETCH_CATEGORY:
            return {
                ...state,
                categories: {
                    ...state.categories,
                    [action.payload.id]: action.payload
                }
            };

        case DELETE_CATEGORY:
            return {
                ...state,
                categories: _.omit(state.categories, action.payload),
                topCategories: _.omit(state.topCategories, action.payload)
            };

        case FETCH_CATEGORIES:
            return {...state, categories:_.mapKeys(action.payload, 'id')};

        case FETCH_TOP_CATEGORIES:
            return {...state, topCategories: _.mapKeys(action.payload, 'id')};

        default:
            return state;
    }
}