build-reducer

Write Redux reducers with simpler syntax

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

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)

/* 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

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

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: {} }
  }
})

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