redaxted

Tools for redacting the noise of Redux.

Motivation

Redux is an amazing tool for thinking of complex data in terms of small transformations!

However, projects that use redux can fail to smooth out norms, and often end devolve into gigantic, ugly case statements that are hard to maintain. The creators of Redux have recognized this and built some tools for smoothing out these rough edges, but they are not particularly readable. They provide the kind of API that requires memorization and consistent use.

This is a series of small tested tools that let you:

• Not thing about creating constants
• Normalize the payload of an action
• Create reducers declaratively focused on a single action type
• Compose reducers for many action types related to an area of the store

Usage

Creating actions

Instead of generating a bunch of constants and then associating those with actions, the library assumes actions don't need to be unique snowflakes, and you don't need to know the name of the constants. You will generate actions and then use them!

import { createActions } from 'redaxted'

const actions = createActions([
  'incrementCounter',
  'decrementCounter',
  // ... etc
])

Using actions

Given access to the dispatch function

import actions from './path/to/actions/generated/above'

const onClick = (_event) => {
  disptach(actions.incrementCounter())
}

Data passed in to the action gets normalized. There is always a type and a payload attribute on the returned action data. The payload is a normalized version of the value passed in. The goal of normalizing is to assure that the payload is always an object or an array that can be easily destructured without type checking. Here are some examples:

action.incrementCounter()
/*
  {
    type: 'incrementCounter',
    payload: {}
  }
*/

action.incrementCounter(undefined)
/*
  {
    type: 'incrementCounter',
    payload: {}
  }
*/

action.incrementCounter(null)
/*
  {
    type: 'incrementCounter',
    payload: {}
  }
*/

action.incrementCounter({increaseBy: 10})
/*
  {
    type: 'incrementCounter',
    payload: {increaseBy: 10}
  }
*/

action.incrementCounter([10])
/*
  {
    type: 'incrementCounter',
    payload: [10]
  }
*/

Literals are packed into an object via a value key. Here are some examples of that:

action.incrementCounter(false)
/*
{
  type: 'incrementCounter',
  payload: { value: false }
}
*/

action.incrementCounter(10)
/*
{
  type: 'incrementCounter',
  payload: { value: 10 }
}
*/

action.incrementCounter('huh?')
/*
{
  type: 'incrementCounter',
  payload: { value: 'huh?' }
}
*/

These normalizations reduce the need for type systems or defensive programming.

Creating reducers

Instead of creating massive case statements, reducers are created with simple transformers that respond to a single action type within a single area of the store. For a given area of the store, different type related reducers are combined together.

To create a basic action for a type use the createReducer and chain call transform with a transformer function.

Transformer functions take the form (state, payload) => newState.

Here is an example:

import actions from './path/to/actions'

const addReducer = createReducer(actions.addToThings)
  .transform((state, payload) => [...state, payload])

addReducer([], actions.addToThings('my first thing'))
// [ 'my first thing' ]

Setting initial state is also done with a chaining call:

import actions from './path/to/actions'

const addReducer = createReducer(actions.addToThings)
  .transform((state, payload) => [...state, payload.value])
  .initialState([])

addReducer()
// []

Composing reducers

Creating reducers that have a single responsibility, means that you need to combine them via functional composition. A reducer equivalent to the gigantic case statement is generated by passing the return values of each small reducer to the next in line.

import actions from './path/to/actions'

const addReducer = createReducer(actions.addToThings)
  .transform((state, payload) => [...state, payload.value])

const removeReducer = createReducer(actions.removeFromThings)
  .transform((state, payload) => {
    return state.filter((element) => element !== payload.value)
  })

const reducer = composeReducers([
  addReducer,
  removeReducer
])

let newState = reducer([], action.addToThings('thing 1'))
// ['thing 1']
newState = reducer([], action.addToThings('thing 2'))
// ['thing 1', 'thing 2']
newState = reducer(newState, action.removeFromThings('thing 1'))
// ['thing 2']

The composeReducers function also chains to allow an initial state, and of course this initial state overrides individual state for the reducers that are being combined:

const reducer = composeReducers([
  addReducer,
  removeReducer
]).initialState([])

Developing

This is open source. Use issues, PRs and other methods to request or suggest changes. There is a code of conduct. Tests can be run with yarn test.

Building from source

The source uses es6 and so index.js the entry point is a Babel compiled version of that code. You can rebuild on your branch with yarn build.