rrethunk
v0.8.7
Published
Reduce redux boilerplate with creators
Downloads
24
Maintainers
Readme
rrethunk
helpers for redux which reduces boilerplate code
Actions
// actions
const clear = (args)=>{
return fetch('api')
}
// it will resolve this promise
// and trigger fetchData:busy while primise is loading
// and fetchData:success when promise is resolved
const fetchData = (args) => (dispatch, getState)=>{
return fetch('api')
}
export const actions = createActions({
fetchData,
clear
}, {
prefix: '@data/',
meta: (args)=> ({ entity: args.entity })
})
dispatch(actions.fetchData({ entity: 'todo', info: 'bla lba' }))
/**
* => {type: '@data/fetchData:loading', payload: { entity: 'todo', info: 'bla lba' }', meta: { entity: 'todo' } }
* => {type: '@data/fetchData:success', payload: {//thunk result}, meta: { entity: 'todo' } }
* or => {type: '@data/fetchData:error', payload: {//error result}, meta: { entity: 'todo' } }
* or => {type: '@data/fetchData:canceled', payload: null, meta: { entity: 'todo' } }
*
*/
actions.fetchData.error('something happened') => ({ }) // => {type: '@data/fetchData:error', payload: 'something happened' }
actions.fetchData.error('something happened', { user: 21 }) => ({ }) // => {type: '@data/fetchData:error', payload: 'something happened', meta: { user: 21 } }
// reducer
import actions from './actions'
const reducer = createReducer({})
.before(actions.fetchData, (state)=> ({ loading: true }))
.canceled(actions.fetchData, (state)=> ({}))
.on(actions.fetchData, (state, payload)=>{
return payload.data
})
.onError(actions.fetchData, (state)=> ({}))
how to use
- add redux-thunk middleware
- just use it as plain actions
also there is actionState reducer which store state of each action