React + Redux, how can I add or omit an object from a specific property in a reducer

582 views Asked by At

I have the following reducer:

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

which is called by two actions, one to FetchTopCategories which updates the topCategories key. The Fetch Categories action fetches categories which updates the categories key.

I can work out how to add or omit a category from the categories key when CREATE, EDIT, FETCH or DELETE category is called.

The state looks like this:

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

enter image description here

I have copied the code for this reducer from another reducer that does not have sub properties like this one, but I want to do this to keep everything 'category' related in the same reducer.

I'm sure I just need to add some code similar to FetchCategories and FetchTopCategories in the remaining action types but I cant work out the syntax.

I'm trying to do something like:

 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);
1

There are 1 answers

0
WraithNath On BEST ANSWER

Ok, I think I have figured it out now.

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