@malfaitrobin/redux

Redux utilities

Installation

With yarn:

yarn install @malfaitrobin/redux

With npm:

npm install --save @malfaitrobin/redux

Table of Contents

• Action Creators
  • createAction
  • createErrorAction
• createReducer
• createReducerCreator

Action creators

Some utilities to work with action creators. All the actions are FSA (Flux Standard Actions) compliant, if you manage to create an action that is not FSA Compliant, it will throw an error.

createAction

A utility to create FSA compliant actions using a type, optional payload and optional meta property.

import { createAction } from "@malfaitrobin/redux";

// A simple action
const action = createAction("FOO");
// { type: 'FOO' }

// An action with a payload
const action = createAction("FOO", { value: 5 });
// { type: 'FOO', payload: { value: 5 } }

// An action with a payload and meta information
const action = createAction("FOO", { value: 5 }, { foo: "bar" });
// { type: 'FOO', payload: { value: 5 }, meta: { foo: 'bar' } }

createErrorAction

A utility to create FSA compliant error actions using a type, optional payload and optional meta property. The payload must be an Error object. It also adds the { error: true } flag.

import { createErrorAction } from "@malfaitrobin/redux";

// A simple action
const action = createErrorAction("FOO");
// { type: 'FOO', error: true }

// An action with a payload
const action = createErrorAction("FOO", new Error("msg"));
// { type: 'FOO', payload: new Error('msg'), error: true }

// An action with a payload and meta information
const action = createErrorAction("FOO", new Error("msg"), {
  foo: "bar"
});
// { type: 'FOO', payload: new Error('msg'), meta: { foo: 'bar' }, error: true }

createReducer

This creates a simple reducer that takes a pattern which is an object and an optional defaultState. If the type you are handling is not defined, it will return the state without touching it.

import { createReducer } from "@malfaitrobin/redux";

const defaultState = {
  value: 0
};

const reducer = createReducer(
  {
    FOO: (state, action) => state
  },
  defaultState
);

createReducerCreator

This is a factory that allows you to create a createReducer function but prepared with some middleware. This allows us to keep the createReducer clean and simple but it gives the power to write more advanced reducers.

import { createReducerCreator } from "@malfaitrobin/redux";

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

const defaultState = {
  value: 0
};

const reducer = createReducer(
  {
    FOO: (state, action) => state
  },
  defaultState
);