@phonbopit/refill
v1.0.5
Published
Refill : React and Redux Utilities function and Toolkits
Downloads
12
Readme
refill
Refill : React and Redux Utilities function and Toolkits
yarn add @phonbopit/refill
Usage
If
<div className="container">
<If when={isShow}>
<p>lorem ipsum</p>
</If>
</div>
Equal to
<div className="container">
{
isShow ? (
<p>lorem ipsum</p>
) : null
}
</div>
createActionSet
It so annoy when create action type for redux e.g.
const FETCH_USER_DATA_PENDING = 'FETCH_USER_DATA_PENDING'
const FETCH_USER_DATA_SUCCESS = 'FETCH_USER_DATA_SUCCESS'
const FETCH_USER_DATA_FAILED = 'FETCH_USER_DATA_FAILED'
const FETCH_USER_LIST_PENDING = 'FETCH_USER_LIST_PENDING'
const FETCH_USER_LIST_SUCCESS = 'FETCH_USER_LIST_SUCCESS'
const FETCH_USER_LIST_FAILED = 'FETCH_USER_LIST_FAILED'
Use createActionSet()
instead
const FETCH_USER_DATA = createActionSet('FETCH_USER_DATA')
const FETCH_USER_LIST = createActionSet('FETCH_USER_LIST')
createReducers
My CRUD App (small to medium size) always have app state structure like this:
{
state: {
users: {
list: [{}],
detail: {},
form: {},
common: {}
},
posts: {
list: [{}],
detail: {},
form: {},
common: {}
},
products: {
list: [{}],
detail: {},
form: {}.
common: {}
}
}
}
If we want to create reducers for user list, user detail, post list, post detail, blah blah. its alot of repeat the same code with just different action name then I decided to DRY my code like this.
// reducers/users/index.js
import { combineReducers } from 'redux'
import detail from './detail'
import list from './list'
export default combineReducers({
detail,
list
})
// reducers/users/list.js
export default createReducers(FETCH_USER_LIST)
// reducers/users/detail.js
export const initialState = {
isFetching: false,
data: null,
error: null
}
export default createReducers(FETCH_USER_DETAIL, initialState)
// TODO // createCommonReducers // createFormReducers // AuthenRoute // getCurrentUser() // setCurrentUser() // logout()