build-reducer

Write Redux reducers with simpler syntax

build-reducer lets you write Redux reducers as individual functions, rather than one huge switch block.

With build-reducer, writing reducers is fun using the ES2015 syntax!

import buildReducer from 'build-reducer'
import {createStore} from 'redux'
 
const reducer = buildReducer({
  reset () {
    return {}
  },
  'profile:load' (state, {payload}) {
    return { ...state, profile: payload }
  },
  'profile:reset' (state, action) {
    return { ...state, profile: {} }
  }
})
 
let store = createStore(reducer)

If you were to write this without build-reducer, you'd have to use a big `switch` block.

/* Traditional Redux reducer without build-reducer */
function reducer (state, action) {
  switch (action.type) {
    case 'reset':
      return {}
    case 'profile:load':
      return { ...state, profile: action.payload }
    case 'profile:reset':
      return { ...state, profile: {} }
    default:
      return state
  }
}
 
let store = createStore(reducer)

Install

npm install --save build-reducer

build-reducer is available via npm.

var buildReducer = require('build-reducer')    // ES5
import buildReducer from 'build-reducer'       // ES2015+

API

buildReducer

buildReducer(reducer, [defaultState])

Creates a function that calls methods from reducer based on the given action type.

defaultState is optional; if given, it will be used as the state if the state is currently undefined.

More examples

You can use the implicit return arrow syntax if you have very simple functions.

const reducer = buildReducer({
  'reset':
    () => {}
  'profile:load':
    (state, {payload}) => ({ ...state, profile: payload })
  'profile:reset':
    (state, action) => ({ ...state, profile: {} })
})

If you prefer to use `CONSTANTS` instead of strings, you can do that with ES2015's computed property names syntax.

const RESET = 'RESET'
const LOAD_PROFILE = 'LOAD_PROFILE'
const RESET_PROFILE = 'RESET_PROFILE'
 
const reducer = buildReducer({
  [RESET] () {
    return {}
  },
  [LOAD_PROFILE] (state, {payload}) {
    return { ...state, profile: payload }
  },
  [RESET_PROFILE] (state, action) {
    return { ...state, profile: {} }
  }
})

build-reducer doesn't need ES2015. You can write your reducers in plain ES5.

const reducer = buildReducer({
  'reset': function () {
    return {}
  },
  'profile:load': function (state, action) {
    return Object.assign({}, state, { profile: action.payload })
  },
  'profile:reset': function (state, action) {
    return Object.assign({}, state, { profile: {} })
  }
})

Thanks

build-reducer © 2016+, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors (list).

ricostacruz.com  ·  GitHub @rstacruz  ·  Twitter @rstacruz