SigmaDigital Redux Helpers

A tiny set of utilities to reduce redux boilerplate, and help your write cleaner code.

What does it do?

Take a single object definition of actions and how state changes, and produce an object containing immutable action constants, an object containing consistent action creators and a reducer function that can be included easily in your store configuration.

Motivation

Managing state with redux requires quite a bit of boilerplate code, especially when you begin to use consistent patterns for action creators for example, you end up repeating yourself a great deal. Secondly as your app grows, recalling which actions do what, and how becomes a hunt through growing switch statements, and multiple files. Not to mention that this growing API for your local application state, can increase the time it takes to on-board new team members.

• DRY^>TM out your code by defining actions, action creators and reducers with a single definition.
• Consistency through a predefined opinionated structure, and single reliable pattern for action objects
• Improve Readability and Maintainability by clearly defining actions and how state should change in a single place.

Enough Talk, Lets Code

// src/store/lib/counter.js
import reduxGen from '@sigmadigital/redux-helpers';

const defaultState = { count: 0 };

// test input data
const definition = {
  INCREMENT: state => ({ ...state, count: state.count + 1 }),
  DECREMENT: state => ({ ...state, count: state.count - 1 }),
  SET: (state, { payload }) => ({ ...state, count: payload.count }),
  RESET: state => ({ ...state, count: 0 }),
};

// this exports an object containing reducer, constants, actions
export default  reduxGen({ definition, defaultState });

// src/store/configure.js
import { createStore, combineReducers } from 'redux';
import { reducer } from './lib/counter'

export default  () => createStore(combineReducers(reducer));

the reduxGen function, takes the definition as above, and the default state, that you would usually pass to your reducer function. it redturns an object:

{
  reducer, // function to be passes to the store
  actions, // object containing action creator functions, the action names have been transformed to camelCase
  constants, // the actions in original case, as an object 
}

Have a look at the expample folder, the tests, and sourcecode for more.