reduxerit
v0.4.2
Published
redux utils to generate reducer and actions in a shorter way
Downloads
36
Readme
reduxerit
reduxerit is strongly influenced from redux-modifiers (https://github.com/calvinfroedge/redux-modifiers), It try to semplify writing the redux reducer, but without using immutablejs.
it is intended to work with redux-actions (https://github.com/acdlite/redux-actions) , but it is not mandatory.
###How it looks like:
import { handleActions } from 'redux-actions'
import { set, removeIdx,push } from 'reduxerit'
const reducerToDoList = handleActions({
'SET_TITLE': set('title'),
'ADD_ITEM': push('items'),
'REMOVE_ITEM': removeIdx('items'),
},
{
title:"",
items:[]
});
##DOCS
##simple example:
often you want just assign the entire payload of your action to a particular reducer. you can do it like this
import { handleActions } from 'redux-actions'
import { set, removeIdx,push } from 'reduxerit'
const apiResponse = handleActions({
'RECEVE_RESPONSE': set()
}, {})
now if you raise an action with a payload, you will see the entire apiResponse state equals to the palyload
store.dipatch({type:'RECEVE_RESPONSE', payload:{ data:[]}} )
now store.getState().apiResponse
will be js { data:[]}}
the reducer without reduxerit would be:
/*WITHOUT REDUXERIT */
const apiResponse = handleActions({
'RECEVE_RESPONSE': (state, action) => ({
...state,
...action.payload
})
},{})
why you have to use set()
and not set
?
becouse the first argument can be a subpatch of the state you want to modify. Let's do an example:
you have an api witch returns you {data:[],pages:{cur:1, totPages:100} }. Let's say that you have 2 methods in this api, 1 to get the whole response and one to refresh just totPages. With reduxerit you can do it like this:
const apiResponse = handleActions({
'RECEVE_RESPONSE': set(),
'RECEVE_UPDATED_TOT_PAGES':set(['pages', 'totPages'])
},{})
let's see the code without reduxerit:
/* WITHOUT REDUXERIT*/
const apiResponse = handleActions({
'RECEVE_RESPONSE': (state, action) => ({
...state,
...action.payload
}),
'RECEVE_UPDATED_TOT_PAGES':(state, action) => ({
...state,
pages:{
...state.pages,
totPages: action.payload
}
})
}, {})
lot of "boilerplate", right?
##when to NOT use reduxerit
redux comes with the combineReducers
function, so you should use it as mutch as you can. as intance, if you need a "loading" status for the api, you should use combineReducers
rather then reduxerit:
const loading = handleActions({
'SEND_REQUST': true
'RECEVE_RESPONSE':false
}, false)
const api = combineReducers({
response:apiResponse,
loading
})
so don't use reduxerit if you don't need it!
##reduxerit api:
here are the reduxerit api:
reduxerit function (they all return a function like (state, action) => newState )
- set
- update
- merge
- deepmerge
- remove
- push
- removeIdx
utils (all the function above are based from those utils functions):
- setIn
- updateIn
- removeIn
look the tests for more details: https://github.com/jurgob/reduxerit/tree/master/test