Installation

install

$ npm i redux-reducer-array-helpers 
$ yarn add redux-reducer-array-helpers

Motivation

You start with a button and an action to toggle its state. When you change to a list of buttons, the action needs to be modified to use an identifier of the button itself that was clicked (usually and index).

The idea here is to have the action unchanged and wrap it into another action creator that injects the index

It also supports multiple dispatches (for example in a thunk action used with redux-thunk)

CHANGELOG

• V3.3 : Added indexer reducer creator
• V3 : Added support for named keys besides index keys (examples below)

API

Reducer creator

/**
 * Will create a reducer to handle the given action types, splitting state by indexes for the wrappedReducer to handle
 * @param {function} wrappedReducer - reducer to decorate
 * @param {object} action types - key to fetch the index
 * @param {object} [options]
 * @param {object} [options.initialState] initial state for the reducer
 * @param {string} [options.key] - key to fetch the index
 * @returns the mapped reducer that handles the types for sliced index state
 */
function indexedReducer(wrappedReducer, actionTypes, options)

Reducer action type handler

/**
 * Reducer decorator to fetch the payload index and nextIndex
 * @param {function} wrappedReducer - reducer to decorate
 * @param {string} [key] - key to fetch the index
 * @returns the mapped reducer that slices state with the current index, and applies to the inner reducer
 *          the next index on the action payload
 */
function unbindIndexToReducer(wrappedReducer, key)

action creators creator

/**
 * Factory of index-based action creators
 * @param {object|function} actionCreators - redux action creator(s)
 * @param {string|object} keyIndexMap - string or key value pair dictionary with key : index to bind in each action generated by each action creator
 * @returns the mapped action creators with the index bound to the generated actions
 */
function bindIndexToActionCreators(actionCreators, keyOrKeyIndexMap)

Example

• action creators injection

export function doToggleColor() {
  return {
    type: actionTypes.DO_TOGGLE_COLOR
  };
}

• numeric Index Usage

import { bindIndexToActionCreators } from 'redux-array-reducer-helpers'
import { doToggleColor } from 'actions/button_actions'

// index = 2 // Example
//... etc
bindIndexToActionCreators(doToggleColor, { colors : index })
//... etc

//state.colors = [someColorObj, someColorObj]
// colorItemReducer = reducer that handles one someColorObj


import { unbindIndexToReducer } from 'redux-array-reducer-helpers'

  function doToggleColorHandler(state, action) {
    const newColors = unbindIndexToReducer(colorItemReducer, 'colors')(state.colors, action);

    return { ...state, colors: newColors };
  }

• named Index Usage

import { bindIndexToActionCreators } from 'redux-array-reducer-helpers'
import { doToggleColor } from 'actions/button_actions'

//... etc
bindIndexToActionCreators(doToggleColor, 'redColor')
//... etc

//state.colors = { redColor : someColorObj, blueColor : someColorObj }
// colorItemReducer = reducer that handles one someColorObj

import { unbindIndexToReducer } from 'redux-array-reducer-helpers'

  function doToggleRedColorHandler(state, action) {
    const newColors = unbindIndexToReducer(colorItemReducer, 'redColor')(state.colors, action);

    return { ...state, colors: newColors };
  }

or generic usage (this will assume the indexes property on action payload only contains named indexes)

  function doToggleColorHandler(state, action) {
    const newColors = unbindIndexToReducer(colorItemReducer)(state.colors, action);

    return { ...state, colors: newColors };
  }

• reducer creator (sets the handlers by convention)

import { indexedReducer } from 'redux-array-reducer-helpers'

export default indexedReducer(wrappedReducer, actionTypes);

License

MIT