@malfaitrobin/redux-namespaced-types

namespacedTypes

Handle namespaced namespace/type/subtype actions, this allows you to cleanly organise some related tasks. It comes with a namespace utility to function to prepare your actions.

Installation

With yarn:

yarn install @malfaitrobin/redux-namespaced-types

With npm:

npm install --save @malfaitrobin/redux-namespaced-types

Usage

import { createReducerCreator } from "@malfaitrobin/redux";
import {
  namespacedTypesMiddleware,
  namespace
} from "@malfaitrobin/redux-namespaced-types";

const createReducer = createReducerCreator(
  namespacedTypesMiddleware /* ...other middleware */
);

const defaultState = {
  value: 0
};

const reducer = createReducer(
  {
    FETCH_FOO: {
      // This will handle an action with { type: 'FETCH_FOO/START' } is dispatched.
      START: (state, action) => {
        return state;
      },

      // This will handle an action with { type: 'FETCH_FOO/SUCCESS' } is dispatched.
      SUCCESS: (state, action) => {
        return state;
      },

      // This will handle an action with { type: 'FETCH_FOO/FAILED' } is dispatched.
      FAILED: (state, action) => {
        return state;
      }
    }
  },
  defaultState
);

// Example action usage:

const FOO = "FOO";

function fooStart() {
  return createAction(namespace(FOO, "START"));
}

function fooSuccess(response) {
  return createAction(namespace(FOO, "SUCCESS"), response);
}

function fooFailed(error) {
  return createAction(namespace(FOO, "FAILED"), error);
}

function fetchFoo() {
  return dispatch => {
    dispatch(fooStart());

    return fetch("https://api.example.com/")
      .then(response => response.json())
      .then(response => dispatch(fooSuccess(response)))
      .catch(error => dispatch(fooFailed(error)));
  };
}