Redux with custom middleware

core.effects.js

import { types, actions } from './actions';
import apolloClient  from '../lib/apolloClient';

const client = apolloClient();

const apiQuery = store => next => action => {
  next(action);

  if (action.type.includes(types.API_QUERY)) {
    client.query(action.payload)
      .then(result => store.dispatch(actions.apiResponded(result, action.meta)))
      .catch(error => store.dispatch(
        actions.apiResponded(new Error(error), {...action.meta, error: true })
      ));
  }
};

// these are almost exactly the same, leaving as-is for now but is a
// candidate for refactor
const apiMutation = store => next => action => {
  next(action);

  if (action.type.includes(types.API_MUTATION)) {
    client.mutate(action.payload)
      .then(result => store.dispatch(actions.apiResponded(result, action.meta)))
      .catch(error => store.dispatch(
        actions.apiResponded(new Error(error), {...action.meta, error: true })
      ));
  }
};
const pending = {};
const debounce = store => next => action => {
  const { debounce } = action.meta;

  if(!debounce) {
    next(action);
    return;
  }

  if (pending[action.type]) {
    clearTimeout(pending[action.type]);
  }

  pending[action.type] = setTimeout(() => {
    delete pending[action.type];

    next(action);
  }, debounce);
};

export default [debounce, apiQuery, apiMutation];

createActions.advanced.js

function createActions(actionTypes, { entity = false, mapToTypes = {} } = {}) {
  const types      = {};
  const actions    = {};
  const namespaces = {};

  for (let property of actionTypes) {
    let typeBucket   = types;
    let actionBucket = actions;
    let [ns, type]   = property.split('/');
    [ns, type]       = type ? [ns, type] : [null, ns]; // handle types without namespaces
    const actionName = camelCase(type);

    if (ns) {
      const prefix    = camelCase(ns);
      namespaces[ns]  = ns;
      actions[prefix] = actions[prefix] || {};
      types[prefix]   = types[prefix] || {};
      typeBucket      = types[prefix];
      actionBucket    = actions[prefix];

      // NB: this will auto generate core types for every namespace in
      // the action list. If you don't want core types mapped onto a
      // namespace, declare it elsewhere.
      for (let k in mapToTypes) {
        let t = mapToTypes[k];
        typeBucket[t] = `${ns}/${t}`;
      };
    }

    typeBucket[type]         = property;
    actionBucket[actionName] = (payload, { error, ...meta } = {}) => ({
      type: entity ? `${meta.entity}/${property}` : property,
      ns,
      payload,
      meta,
      error,
    });
  };

  return { namespaces, types, actions };
}

createActions.simple.js

import { camelCase } from 'camel-case';

export function createActions(actionTypes) {
  const types   = {};
  const actions = {};

  actionTypes.forEach(property => {
    types[property.replace('/', '_')] = property;
    actions[camelCase(property)] = x => ({ type: property, payload: x });
  });

  return { types, actions };
}

namespace.example.js

export const { types, namespaces, actions } = createActions([
  // commands
  'QUIZZES/NEW',
  'QUIZZES/FETCH',
]);

function quizzesReducer(state, { type, payload }) {
  const t = types.quizzes;
  switch(type) {
    case t.NEW:
    ///      ...
}

no-namespace.example.js

const { actions, types } = createActions([
  'SAVING_WIDGET',
  'SAVED_WIDGET',
]);

function reducer(state, { type, payload }) {
  switch(type) {
    case types.SAVING_WIDGET:
      return {
        ...state,
        loading: true,
      };
    case types.SAVED_WIDGET:
      return {
        ...state,
        loading: false,
      };
    default:
      return state;
}
  
// elsewhere
dispatch(actions.savingWidget());

Expanded this example a bit to illustrate adding namespaces and metadata to types, as well as integrating that with middleware for handling async and effects.