redux-map-reducers

Redux reducer that maps over an object of action types.

Usage no npm install needed!

<script type="module">
  import reduxMapReducers from 'https://cdn.skypack.dev/redux-map-reducers';
</script>

README

redux-map-reducers

Redux reducer that maps over an object of action types.

Install

$ npm install --save redux-map-reducers

Motivation

I find switching or if-ing over action.type in Redux a bit awkward and error-prone, so using a map of reducers, each one already mapped to process a specific action seems a better approach.

Docs

import { mapReducers } from 'redux-map-reducers'

mapReducers(reducerMap: Object [, initialState: Object]): Function

The mapReducers function returns a reducer function that processes the action being dispatched if it is one of the actions specified in the reducerMap keys. When it finds such a key, it returns the new state, as returned by the associated reducer for that type of action. If an action of an unknown type is dispatched, the reducer created with mapReducers will simply ignore the action since it does not know how to process it, and returns the state as received.

A slight limitation of mapReducers is that for each reducer map you pass in, you will only have one reducer handle a certain action type. In practice, we experienced this is not so much of an issue. You can however have your main Redux reducer combine multiple mapReducers to handle a specific action in multiple functions.

  • reducerMap: Object - a map with keys being action types and values being reducer functions. When redux dispatches an action, if the action type matches one of the keys in this map, the associated reducer function returns the state.
  • initialState: Object - optional. Defaults to {}. In redux, each reducer should return the initial/default state if the passed state is undefined.

Usage


import { createStore } from 'redux'
import { mapReducers } from 'redux-map-reducers'

const addTodo = (state, action) => {
  //action.type === 'ADD_TODO'

  return Object.assign({}, state, {
    todos: [action.todo, ...state.todos]
  })
}

const removeTodo = (state, action) => {
  
  // ... process the state

  return state
}

const toggleTodo = (state, action) => {
  //...
  return state
}

const initialState = { todos: [] }

const reducers = mapReducers({
  'ADD_TODO': addTodo,
  'REMOVE_TODO': removeTodo,
  'TOGGLE_TODO': toggleTodo
}, initialState)

const store = createStore(reducers)

License

MIT