Write your reducers with less boilerplate!
npm install --save reswitch
Through its simplest usage, within a fictional userReducer.js reducer:
yourapp/reducers/usersReducer.js
import reswitch from 'reswitch'
import {
USERS_GET,
USERS_GET__SUCCESS,
USERS_GET__FAILURE
} from 'reducers/users'
function users(state = {
areLoading: false,
hasError: false,
users: null
}, action) {
return reswitch(
USERS_GET, {areLoading: true, hasError: false, users: null},
USERS_GET__SUCCESS, {areLoading: false, hasError: false, users: action.users},
USERS_GET__FAILURE, {areLoading: false, hasError: true, users: null},
)(state, action.type)
}
export default usersOr you can even hang with functions!
return reswitch(
USERS_GET, {areLoading: true, hasError: false, users: null},
USERS_GET__SUCCESS, {areLoading: false, hasError: false, users: action.users},
USERS_GET__FAILURE, () => ({...state, action.error})
)(state, action.type)Important: In case none of the actions match, then state will be used
instead as the default. Maybe you want to use a different fashion, then just
leave your reswitch with an odd number of arguments and it will pick
the last one as the new default:
return reswitch(
USERS_GET, {areLoading: true, hasError: false, users: null},
USERS_GET__SUCCESS, {areLoading: false, hasError: false, users: action.users},
USERS_GET__FAILURE, () => ({...state, action.error}),
() => ({areLoading: false, hasError: false, users: null, areAdmin: false})
)(state, action.type)In the above's example we're defining the last argument as a function, but it doesn't need to be. You can use a plain object—or even a complex one!—if you need.
I don't like those huge amounts of switches. Although in the official Redux's website
they're saying that switches aren't the real boilerplate,
I still don't like to use it. It looks like a boilerplate and for me that's
reason enough;
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent