create-reducer-extra

A few helpful utilities for creating boilerplate-free redux reducers

Usage

As a convenience* all reducing functions are called directly with the actions payload property

const actionHandler = {
  ActionType: (state, payload) => { ... },
  SomeOtherActionType(state, payload) { ... },
}

createMergeReducer

Allows you to only specify what has changed in your reducing function, e.g

import { createMergeReducer } from 'create-reducer-extra'

const initialState = {
  animals: ['ant', 'bat'],
  counter: 2,
}

const reducer = createMergeReducer(initialState, {
  Add: ({ counter }, incrementAmount) => ({ counter: counter + incrementAmount}),
  NewAnimals: ({ animals }, newAnimals) => ({ animals: [...animals, ...newAnimals] }),    
})

reducer(initialState, { payload: 5, type: 'Add' })
// { counter: 7, animals: ['ant', 'bat'] }

reducer(initialState, { payload: ['cat', 'dog'], type: 'NewAnimals' })
// { counter: 2, animals: ['ant', 'bat', 'cat', 'dog] }

createReducer

For when you want to specify exactly what the next state will be

import { createReducer } from 'create-reducer-extra'

const initialState = {
  animals: ['ant', 'bat'],
  counter: 2,
}

const reducer = createReducer(initialState, {
  Add: ({ counter }, incrementAmount) => ({ counter: counter + incrementAmount}),
  NewAnimals: ({ animals, counter }, newAnimals) => ({ animals: [...animals, ...newAnimals], counter }),    
})

reducer(initialState, { payload: 3, type: 'Add' })
// { counter: 5 }
// Note the missing 'animals' property

createResettableReducer

Provides the ability to reset a reducer to its initial state.

This can be useful for handling things such as a logout in a single page app.

The ResetState can be overridden in the handler to provide custom behaviour.

import { createResettableReducer, ResetState } from 'create-reducer-extra'

const initialState = { animals: ['ant', 'bat'], counter: 2 }

const reducer = createMergeReducer(initialState, {
  Add: ({ counter }, incrementAmount) => ({ counter: counter + incrementAmount}),
  NewAnimals: ({ animals }, newAnimals) => ({ animals: [...animals, ...newAnimals] }),    
})

const nextState = reducer(initialState, { payload: 5, type: 'Add' })
// { counter: 7, animals: ['ant', 'bat'] }

reducer(nextState, { type: ResetState })
// { animals: ['ant', 'bat'], counter: 2 } === initialState

createResetMergeReducer

Combines the functionality of createMergeReducer and createResettableReducer.

Note that if the ResetState action is handled by the reducer, the result returned will be merged into the current state e.g.

import { createResetMergeReducer, ResetState } from 'create-reducer-extra'

const initialState = { animals: ['ant', 'bat'], counter: 2 }

const reducer = createResetMergeReducer(initialState, {
  Add: ({ counter }, incrementAmount) => ({ counter: counter + incrementAmount}),
  [ResetState]: ({ animals }) => ({ animals: [] }),    
})

const nextState = reducer(initialState, { type: ResetState })
// { counter: 2, animals: [] }

CharlesRea / create-reducer-extra