reducer-with-combineType-utility.js

import * as types from '../constants';
import combineTypes from '../utils';

const item = (state, action) => {
    const actions = {
        [types.UPDATE_ITEM_SIZE_REQUEST]: () => ({
            ...state,
            isUpdatingSize: true
        }),
        [types.UPDATE_ITEM_SIZE_SUCCESS]: () => action.payload,
        [types.UPDATE_ITEM_SIZE_FAILURE]: () => ({
            ...state,
            isUpdatingSize: false,
            error: action.payload.error
        }),
        [types.DELETE_ITEM_REQUEST]: () => ({
            ...state,
            isDeleting: true,
            isDeletingTimerOn: true
        }),
        [types.DELETE_ITEM_SUCCESS]: () => ({
            ...state,
            isDeleting: false,
            isDeletingTimerOn: false,
            isDeleted: true
        }),
        [types.DELETE_ITEM_FAILURE]: () => ({
            ...state,
            isDeleting: true,
            isDeletingTimerOn: true,
            error: action.payload.error
        }),
        [types.ADD_ITEM_TO_CART_REQUEST]: () => ({
            ...state,
            isUpdatingCart: true
        }),
        [types.ADD_ITEM_TO_CART_SUCCESS]: () => ({
            ...state,
            isAddingToCart: false,
            article: {
                isOnCart: true
            }
        }),
        [types.ADD_ITEM_TO_CART_FAILURE]: () => ({
            ...state,
            isAddingToCart: false,
            error: action.payload.error
        }),

        default: () => state
    };

    return (actions[action.type] || actions.default)();
};

const items = (state, action) => {
    const itemId = action.payload.itemId;

    const actions = {
        [combineTypes({
            by: action.type,
            with: [
                types.UPDATE_ITEM_SIZE_REQUEST,
                types.UPDATE_ITEM_SIZE_SUCCESS,
                types.UPDATE_ITEM_SIZE_FAILURE,
                types.DELETE_ITEM_REQUEST,
                types.DELETE_ITEM_SUCCESS,
                types.DELETE_ITEM_FAILURE,
                types.ADD_ITEM_TO_CART_REQUEST,
                types.ADD_ITEM_TO_CART_SUCCESS,
                types.ADD_ITEM_TO_CART_FAILURE
            ]
        })]: () => ({
            ...state,
            [itemId]: item(state[itemId], action)
        }),

        default: () => state
    };

    return (actions[action.type] || actions.default)();
};

const collectionData = (state, action) => {
    const { collectionId, itemCount } = action.payload;

    const actions = {
        [combineTypes({
            by: action.type,
            with: [
                types.UPDATE_ITEM_SIZE_REQUEST,
                types.UPDATE_ITEM_SIZE_SUCCESS,
                types.UPDATE_ITEM_SIZE_FAILURE,
                types.DELETE_ITEM_REQUEST,
                types.DELETE_ITEM_SUCCESS,
                types.DELETE_ITEM_FAILURE,
                types.ADD_ITEM_TO_CART_REQUEST,
                types.ADD_ITEM_TO_CART_SUCCESS,
                types.ADD_ITEM_TO_CART_FAILURE
            ]
        })]: () => ({
            ...state,
            items: items(state[collectionId], action)
        }),

        [types.SHOW_MORE_ITEMS]: () => ({
            ...state,
            visibleItems: itemCount
        }),

        default: () => state
    };


    return (actions[action.type] || actions.default)();
};

const itemsByCollection = (state, action) => {
    const { collectionId } = action.payload;

    const actions = {
        [combineTypes({
            by: action.type,
            with: [
                types.SHOW_MORE_ITEMS,
                types.UPDATE_ITEM_SIZE_REQUEST,
                types.UPDATE_ITEM_SIZE_SUCCESS,
                types.UPDATE_ITEM_SIZE_FAILURE,
                types.DELETE_ITEM_REQUEST,
                types.DELETE_ITEM_SUCCESS,
                types.DELETE_ITEM_FAILURE,
                types.ADD_ITEM_TO_CART_REQUEST,
                types.ADD_ITEM_TO_CART_SUCCESS,
                types.ADD_ITEM_TO_CART_FAILURE
            ]
        })]: () => ({
            ...state,
            [collectionId]: collectionData(state[collectionId], action)
        }),

        default: () => state
    };

    return (actions[action.type] || actions.default)();
};

export default itemsByCollection;

I have to admit that it was a reasonable argues, however, I think this is not a case where we have to really pay attention to performance issues.

I do agree that a switch statement is more readable, but it doesn't mean that it is the best way of matching objects in JavaScript.

• I'll say switch statement is a habit that developers inherited from OOP languages, like C++, C#, Java etc.
• IMHO I believe object-literals is the natural way of JavaScript to operate on object matching operations.

There is a very good article on the subject here

Totally agree with this :).
I liked object literals and I have always used it against switch wherever possible coz its less verbose and more readable.
But unexpectedly switch brings more readability in the above code. Also for redux, I personally prefer switch more, due to redux docs.. coz in my experience "conventions" in code always added to developer friendlyness.

But object literal is fine as well. In that case, the object literal just have to be made more simple to follow through. The combineType still remains tricky. What do you think about the second comment where the code snippet doesnt have the dynamic object generation?

I believe it was included to JavaScript for the same reason as Brendon Eich did it with the initial name of JavaScript which was Mocha then it was LiveScript and finally became JavaScript. It was a marketing strategy - to attract Java developers to switch to JavaScript. The same story with a new operator, var julian = new Person() - it's just about business and nothing about real philosophy of JavaScript :)

Let's be more Object'ish :)

I'm not really trying to push with object-literals I'm just really upset because Flux started using it and Redux just follow them.