@sigmadigital/duxedo

Duxedo for Redux

A tiny, easy to use utility to help you write cleaner code, and scale redux easily.

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 FSA compliant action creators and a reducer function that can be included easily in your store configuration, or components, just the way you would usually. No extra fuss.

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, along with increasing support, maintenance, and iteration time.

• 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. (FSA compliant)
• Improve Readability and Maintainability by clearly defining actions and how state should change in a single place.

Enough Talk, Lets Code

install with npm:

npm install --save @sigmadigital/duxedo

or with yarn:

yarn add @sigmadigital/duxedo

Add your dependencies if you haven't already:

npm install --save react redux react-dom react-redux

NB: You'll likely need a build pipeline (ie: webpack, parcel or rollup etc) with babel to transpile es6/es7+..

// src/store/definitions/counter.js
import duxedo from '@sigmadigital/redux-helpers';

// define your default state
const defaultState = { count: 0 };

// Define your actions and how state should change
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 const { reducer, actions, constants } = duxedo({
  definition,
  defaultState,
});

// src/store/index.js
import { createStore, combineReducers } from 'redux';
import { reducer as counter } from './definitions/counter';

export default () => createStore(combineReducers({ counter }));

the duxedo function takes the definition as above, and the default state, that you would usually pass to your reducer function and returns an object:

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

Have a look at the /example directory for a full example with redux and react. Alternatively, have a look at the example app or fork the sandbox here:

Collaboration

If you find an issue, have an idea or would like to contribute, either let us know in the issues, or fork our repo, and open a pull request. If you do, please ensure all tests are passing, and that any new items have coverage as well.

A Sigma Digital Project. Copyright 2019. License MIT.