build-reducer
Write Redux reducers with simpler syntax
Last updated 4 years ago by rstacruz .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install build-reducer 
SYNC missed versions from official npm registry.

build-reducer

Write Redux reducers with simpler syntax

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

Status

<summary>With build-reducer, writing reducers is fun using the ES2015 syntax!</summary>
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)
<summary>If you were to write this without build-reducer, you'd have to use a big `switch` block.</summary>
/* 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

<summary>You can use the implicit return arrow syntax if you have very simple functions.</summary>
const reducer = buildReducer({
  'reset':
    () => {}
  'profile:load':
    (state, {payload}) => ({ ...state, profile: payload })
  'profile:reset':
    (state, action) => ({ ...state, profile: {} })
})
<summary>If you prefer to use `CONSTANTS` instead of strings, you can do that with ES2015's computed property names syntax.</summary>
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: {} }
  }
})
<summary>build-reducer doesn't need ES2015. You can write your reducers in plain ES5.</summary>
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

Current Tags

  • 1.2.0                                ...           latest (4 years ago)

2 Versions

  • 1.2.0                                ...           4 years ago
  • 1.1.0                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 2
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (1)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |