redux-util
npm install redux-util
Or
yarn add redux-util
This library is easy way to work with Redux.
Let's see the some examples
1. Create action
import {buildActionCreator} from 'redux-util' const GET_USER_DATA_SUCCESS = 'GET_USER_DATA_SUCCESS'; //Build actionCreator with param 'users' const getUserInfoRequestActionCreator = buildActionCreator(GET_USER_DATA_SUCCESS, 'users'); const getUserInfoAction = () => (dispatch: Dispatch) => { return api.fetchUsers().then( response => { dispatch( //Create action with param getUserInfoSuccessActionCreator(response) ) } );}; export default getUserInfoAction;
2. prefixed actions
import {buildActionCreator, genericActionType} from 'redux-util' const PREFIX = 'USER';const LOAD_DATA = genericActionType(PREFIX, 'LOAD_DATA'); const loadUserDataAction = buildActionCreator(LOAD_DATA, 'data'); export const loadUser = () => (dispatch: Dispatch) => { return api.fetchUser().then( response => { dispatch( loadUserDataAction(response) ) } );};
3. generic action creator
import {buildGenericActionCreator} from 'redux-util' const START_LOADING = 'START_LOADING';const END_LOADING = 'END_LOADING'; export const startLoadingActionCreator = buildGenericActionCreator(START_LOADING);export const endLoadingActionCreator = buildGenericActionCreator(END_LOADING); // .... import {startLoadingActionCreator, endLoadingActionCreator} from 'loading-reducer' const PREFIX = 'PREFIX';const startLoading = startLoadingActionCreator(PREFIX);const endLoading = endLoadingActionCreator(PREFIX);export const loadUser = () => (dispatch: Dispatch) => { dispatch(startLoading()); return api.fetchUser().then( response => { dispatch( loadUserDataAction(response) ); dispatch(endLoading()); } );};
4. Create reducer
import {Reducer} from 'redux-util'import {UserState} from 'types/UserState' import { GET_USER_DATA_REQUEST, GET_USER_DATA_SUCCESS, GET_USER_DATA_FAIL} from 'services/actionTypes' const initialState: UserState = []; export default Reducer(initialState, { [GET_USER_DATA_REQUEST]: () => null, [GET_USER_DATA_SUCCESS]: (state, action) => ({ ...state, data: action.users }), [GET_USER_DATA_FAIL]: (state, action) => ({ ...state, error: action.error })});
create actions with payload
You can also create actions with payload field. To do this just import action creator from with-payload namespace
import {buildActionCreator} from 'redux-util/with-payload'import {buildGenericActionCreator} from 'redux-util/with-payload' const LOAD_DATA = 'LOAD_DATA';export const loadDataAction = buildActionCreator(LOAD_DATA, 'data');// .....dispatch(loadDataAction([1,2,3]))/* { type: 'LOAD_DATA', payload: { data: [1,2,3] } } */