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)npm install --save build-reducer
build-reducer is available via npm.
var buildReducer = require('build-reducer') // ES5
import buildReducer from 'build-reducer' // ES2015+
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.
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: {} })
}
})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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent