redux-binary

Create simple Redux actions and a reducer for managing binary state.

Install

$ npm install redux-binary

Usage

Use reduxBinary to create a reducer and actions for state that can take on only two values. The default binary values are false and true, with the initial state being set to whatever the "off" value is. In this case, that would be the default value false. reduxBinary returns an object containing the reducer, binary actions, and binary action type names.

The first argument is a suffix that will be used to generate the action type names. The action type names are generated by appending 'ON_' and 'OFF_' to the suffix and uppercasing the whole action type name. The returned action types are keyed with 'ON' and 'OFF'.

import reduxBinary from 'redux-binary';
 
const suffix = 'editing';
const { actionTypes } = reduxBinary(suffix, 'edit', 'stopEditing')
 
actionTypes.ON === 'ON_EDITING';
actionTypes.OFF === 'OFF_EDITING';

The returned action creators, keyed by actions, are named by the second and third arguments. The second argument is the name of the "on" action creator, and the third argument is the name of the "off" action creator.

import reduxBinary from 'redux-binary';
 
const onActionName = 'edit';
const offActionName = 'stopEditing';
 
const { actionTypes, actions } = reduxBinary(
  'editing', onActionName, offActionName
);
 
actions[onActionName] === actions.edit;
actions[offActionName] === actions.stopEditing;
 
actions.edit();        // { type: actionTypes.ON };
actions.stopEditing(); // { type: actionTypes.OFF };

The reducer only handles the two generated actions. As you might guess, the reducer flips the state from "off" to "on" and vice-versa. If the state is already "on", then the "on" action does not change it. The same idea applies to the "off" state.

import reduxBinary from 'redux-binary';
 
const { reducer, actions } = reduxBinary(
  'editing', 'edit', 'stopEditing'
);
 
reducer(undefined, {}) === false; // Initial default state of false
 
reducer(false, actions.edit())        === true;
reducer(true,  actions.edit())        === true;
reducer(false, actions.stopEditing()) === false;
reducer(true,  actions.stopEditing()) === false;

You can define what the binary state is by supplying objects to the second and third arguments as well. Pass in a single key-value object where the key is the action creator name and the value is the state for that particular argument number (i.e. the value inside second object argument would be the "on" state). In this case, the initial state will be equal to whatever your "off" state is.

import reduxBinary from 'redux-binary';
 
const onActionDef = { edit: 1 };
const offActionDef = { stopEditing: 0 };
 
const { reducer, actions } = reduxBinary(
  'editing', onActionDef, offActionDef
);
 
reducer(undefined, {}) === 0; // Initial "off" state of 0
 
reducer(false, actions.edit())        === 1;
reducer(true,  actions.edit())        === 1;
reducer(false, actions.stopEditing()) === 0;
reducer(true,  actions.stopEditing()) === 0;

If you don't want your initial state to be "off", then you can also pass in an object for the first argument, the suffix. Similar to the object for defining your action creators and binary state, this object must be a single key-value object where the key is the suffix name and the value is the initial state. NOTE: the initial state must be one of the binary state values.

Example with default state values:

import reduxBinary from 'redux-binary';
 
const suffixDef = { editing: true };
 
const { reducer, actions } = reduxBinary(
  suffixDef, 'edit', 'stopEditing'
);
 
reducer(undefined, {}) === true; // Initial value of true

Example with custom state values:

import reduxBinary from 'redux-binary';
 
const suffixDef = { editing: true };
const onActionDef = { edit: 1 };
const offActionDef = { stopEditing: 0 };
 
const { reducer, actions } = reduxBinary(
  suffixDef, onActionDef, offActionDef
);
 
reducer(undefined, {}) === 1; // Initial value of 1

Example with improper initial state value:

import reduxBinary from 'redux-binary';
 
// These will throw
reduxBinary(
  { editing: 1 }, 'edit', 'stopEditing'
};
 
reduxBinary(
  { editing: true }, { edit: 1 }, { stopEditing: 0 }
);

It goes without saying, but your "on" and "off" action creator names and custom state values can't be the same either:

import reduxBinary from 'redux-binary';
 
// These will throw
reduxBinary('editing', 'edit', 'edit');
 
reduxBinary(
  'editing', { edit: 1 }, { edit: 0 }
};
 
reduxBinary(
  'editing', { edit: 1 }, { stopEditing: 1 }
);

API

type OnValue = any;
type OffValue = any;
type State = OnValue | OffValue;
type Action = { type: string };
 
reduxBinary(
  suffixDef: string | { [dynamic]: State },
  onActionDef: string | { [dynamic]: OnValue },
  offActionDef: string | { [dynamic]: OffValue }
): {
  reducer: (state: State, action: Action) => State;
 
  actionTypes: {
    ON: string;
    OFF: string
  };
 
  actions: {
    `ON_${dynamic}`: () => Action,
    `OFF_${dynamic}`: () => Action
  }
};