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 namehandler (Function)
- action handlerinitialState (any)
- reducer initial statesagaTaker (Function)
- saga effect functioncustomReducer (Function)
- custom reducer functioncustomSagaGenerator (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);
Return sagas created by createAsyncAction()
.
Usage example:
import { getAsyncSagas } from 'experium-modules';
import { all } from 'redux-saga/effects';
function* rootSaga() {
yield all(getAsyncSagas());
}
Return data and meta reducers created by createAsyncAction()
.
Usage example:
import { getAsyncReducers } from 'experium-modules';
import { combineReducers } from 'redux';
const rootReducer = combineReducers({
...getAsyncReducers();
});
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 handlerreset (Function)
- reset reducer stateerror (Function)
- set error in reducer statesuccess (Function)
- set data in reducer stateload (Function)
- force set data in statedata (any)
- action datameta (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 pathwithPayload(getPayload (Function (props)))
- tell asyncClient to get payload for dispatch of autoFetch or autoUpdate bywithSuccesHandler(handler Function (props, successAction))
- success handler for connected action paramswithErrorHandler(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
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
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);
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');
Return action.
type (String)
- action namestaticPayload (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);
Add handler for action.
type (String)
- action type namehandler (Function)
- hadler for action
Usage example:
import { setActionHandler } from 'experium-modules';
import axios from 'axios';
const handler = () => axios.get('/user');
setActionHandler('GET_USER', handler);
Сreates the task that will perform the asynchronous action.
actionFn (Function)
- action creatoraction (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);
}
Сreates the customSagaGenerator that will perform the actions with cache storage config.
cacheConfig for storage:
getItem (Function (path))
- get cache from storagesetItem (Function (path, item: Object))
- set cache in storage
where params:
path (string)
- cache path identifieritem (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 }),
});