1.0.4 • Published 7 years ago
redux-util v1.0.4
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]
}
}
*/