React async client
createAsyncAction(actionConfig(actionName, handler, initialState = undefined, sagaTaker = takeLatest, customReducer = defaultReducer) || actionConfig: {})
The function creates an action, a saga, a data reducer and a meta reducer.
Action config:
-
actionName (String)
- action name -
handler (Function)
- action handler -
initialState (any)
- reducer initial state -
sagaTaker (Function)
- saga effect function -
customReducer (Function)
- custom reducer function -
customSagaGenerator (Function*)
- custom saga request generator function or: -
actionConfig (Object)
- action config
Usage example:
import { createAsyncAction, takeFirst } from 'experium-modules';
import axios from 'axios';
const getUser = createAsyncAction('GET_USER', () => axios.get('/user'), {});
const getUserOnce = createAsyncAction('GET_USER_ONCE', () => axios.get('/user'), {}, takeFirst);
getAsyncSagas()
Return sagas created by createAsyncAction()
.
Usage example:
import { getAsyncSagas } from 'experium-modules';
import { all } from 'redux-saga/effects';
function* rootSaga() {
yield all(getAsyncSagas());
}
getAsyncReducers()
Return data and meta reducers created by createAsyncAction()
.
Usage example:
import { getAsyncReducers } from 'experium-modules';
import { combineReducers } from 'redux';
const rootReducer = combineReducers({
...getAsyncReducers();
});
withAsyncActions(actions || actionsGetter, options)
HOC
withAsyncActions
HOC creates component with extended actions.
-
actions (Object) || actionsGetter (Function)
- actions which we want to extend and pass to component. -
options (Object)
- you can provide options to Async HOC component.
Actions object could had these properties:
Actions getter function actionsGetter(props) => object
used to bind props in action.
Options object could had these properties:
-
dispatchOnMount (bool)
- callaction.dispatch(payload)
oncomponentWillMount
-
dispatchOnUpdate (bool)
- callaction.dispatch(payload)
with nextProps ifwithPayload(this.props)
doesnt equalswithPayload(nextProps)
oncomponentWillReceiveProps
-
resetOnUpdate (bool)
- will callaction.reset()
before dispatching whendispatchOnUpdate
istrue
-
resetOnUnmount (bool)
- callaction.reset()
oncomponentWillUnmount
-
resetOnMount (bool)
- callaction.reset(payload)
oncomponentWillMount
-
skipExtraRender (bool)
- skip first render when using withdispatchOnMount
orresetOnMount
-
pollInterval (int)
- periodically dispatch action withdefaultPayload
Return extended component that in props have action object with these properties:
-
dispatch (Function)
- call handler -
reset (Function)
- reset reducer state -
error (Function)
- set error in reducer state -
success (Function)
- set data in reducer state -
load (Function)
- force set data in state -
data (any)
- action data -
meta (Object)
- action meta. Meta haspending
,success
anderror
properties.
Basic usage example:
import { withAsyncActions } from 'experium-modules';
import { getUser } from './actions';
class Page extends Component {
componentDidMount() {
this.props.getUser.dispatch();
}
render() {
return <div>Page of { this.props.data }</div>;
}
}
Page = withAsyncActions({ getUser })(Page);
actionsGetter (Function) => actions (Object)
actionsGetter function provide props to first argument
and should return object of asyncClient actions.
Action can be extended with params or payload:
-
withParams(params (Function (props) || Object || String))
- tell asyncClient to store results of action by string of params path -
withPayload(getPayload (Function (props)))
- tell asyncClient to get payload for dispatch of autoFetch or autoUpdate by -
withSuccesHandler(handler Function (props, successAction))
- success handler for connected action params -
withErrorHandler(handler Function (props, errorAction))
- error handler for connected action params
Usage example:
import { withAsyncActions } from 'experium-modules';
import { getUser } from './actions';
class Page extends Component {
componentDidMount = () {
this.props.getUserFirst.dispatch();
this.props.getUserSecond.dispatch();
}
render() {
const { getUserFirst, getUserSecond } = this.props;
return (
<div>
{ getUserFirst.meta.success && getUserFirst.data.name }
{ getUserSecond.meta.success && getUserSecond.data.name }
</div>
);
}
}
const propsToAction = () => ({
getUserFirst: getUser.withPayload((props) => props.firstId),
getUserSecond: getUser.withPayload((props) => props.secondId)
});
const PageWithAsync = withAsyncActions(propsToAction)(Page);
Options of withAsyncActions
can do dispatch reqeusy and reset events for you.
Usage example of autoUpdate
, autoFetch
and autoReset
options:
import { withAsyncActions } from 'experium-modules';
import { getUser } from './actions';
const User = ({ getUser }) => (
<div>
{ getUser.meta.success && getUser.data.name }
</div>
);
const propsToAction = ({ id }) => ({
getUser: getUser.withParams({ id }).withPayload((props) => props.id)
});
const options = {
autoFetch: true,
autoUpdate: true,
autoReset: true
};
const UserWithAsync = withAsyncActions(propsToAction, options)(User);
This example component call getUser.dispatch
on componentWillMount.
You can have any count of UserWithAsync
on page with different data becouse they stored by params path of id,
but if you have two components with same id its bind to one source of data.
If props.id
of UserWithAsync
component changed asyncClient reset data by previous id and fetch with new id.
On componentWillUnmount component call getUser.reset
and data by this component props.id
removed from store.
withAsyncHandlers(actionsHandlers: {})
HOC
withAsyncHandlers
HOC creates component with handlers which would executes only if component is mount. It binds for action from parent props or if item of actionsHandlers is action.
import { withAsyncHandlers } from 'experium-modules';
import { postUser } from './actions';
const UserList = () => (
<div>
User List Component with Modal
</div>
);
const UserWithAsync = withAsyncHandlers({
postUser: postUser.withSuccessHandler(props => console.log('user updated'))
})(UserList);
withSagas(sagas: [])
HOC
withSagas
HOC creates component with sagas which would executes only if component is mount.
import { withSagas } from 'experium-modules';
const Component = () => (
<div>Component</div>
);
const UserWithAsync = withSagas([function* (getProps) {
yield take(ACTION);
yield take(ACTION_SUCCESS);
}])(Component);
Action Helpers
toError(actionType)
toRequest(actionType)
toSuccess(actionType)
toReset(actionType)
toLoad(actionType)
Return action type name with state.
-
actionType (string)
- action type name
Usage example:
import { toSuccess } from 'experium-modules';
const GET_USER_SUCCESS = toSuccess('GET_USER');
createAction(type, staticPayload)
Return action.
-
type (String)
- action name -
staticPayload (Any)
- static payload
Usage example:
import { createAction } from 'experium-modules';
const action = createAction('GET_USER');
You can pass additional attributes to action.
Example:
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { getUser } from './getUser';
const Page = () => <div>Page</div>;
const dispatchToProps = (dispatch, props) => bindActionCreators({
getUser: payload => getUser(payload, { id: props.id });
});
Page = connect(null, dispatchToProps)(Page);
setActionHandler(type, handler)
Add handler for action.
-
type (String)
- action type name -
handler (Function)
- hadler for action
Usage example:
import { setActionHandler } from 'experium-modules';
import axios from 'axios';
const handler = () => axios.get('/user');
setActionHandler('GET_USER', handler);
Redux Utils
requestGenerator(actionFn, action)
Сreates the task that will perform the asynchronous action.
-
actionFn (Function)
- action creator -
action (Object)
- action
Usage example:
import { takeEvery } from 'redux-saga/effects';
import { requestGenerator } from 'experium-modules';
const fetchUserActionCreator = (payload, attrs) => {
...
};
function* watchFetchUser() {
yield takeEvery('USER_REQUESTED', requestGenerator, fetchUserActionCreator);
}
createRequestCacheGenerator(cacheConfig: Object)
Сreates the customSagaGenerator that will perform the actions with cache storage config.
cacheConfig for storage:
-
getItem (Function (path))
- get cache from storage -
setItem (Function (path, item: Object))
- set cache in storage
where params:
-
path (string)
- cache path identifier -
item (Object)
- data cache object that should be handled to storage
Usage example:
import { createRequestCacheGenerator } from 'react-async-client';
const cache = {};
getItem = path => cache[path];
setItem = (path, item) => cache[path] = item;
const getUser = createAsyncAction({
actionName: 'GET_USER',
handler: () => 'data',
customSagaGenerator: createRequestCacheGenerator({ getItem, setItem }),
});