@recruit-tech/redux-async-loader
v2.0.1
Published
Async data loader for Redux apps.
Downloads
21
Readme
redux-async-loader
Async data loader for Redux apps with React-Router.
CAUTION
redux-async-loader
is incompatible with react-redux@5
For react-redux@5
, you neeed to use the 1.x release of redux-async-loader.
Installation
npm install --save redux-async-loader
Usage
1. Register Reducer
import { combineReducers, createStore } from 'redux';
import { reduxAsyncLoader } from 'redux-async-loader';
const store = createStore(combineReducers({
reduxAsyncLoader,
...
}), initialState);
2. Server-Side Rendering (Optional)
import { applyRouterMiddleware, match, RouterContext } from 'react-router';
import { loadOnServer } from 'redux-async-loader';
match({ history, routes }, (error, redirectLocation, renderProps) => {
// ...
loadOnServer(renderProps, store).then(() => {
const content = renderToString(
<Provider store={store} key="provider">
<RouterContext {...renderProps} />
</Provider>
);
});
});
3. Client-Side Rendering
import { render } from 'react-dom';
import { Router, applyRouterMiddleware, browserHistory } from 'react-router';
import { useAsyncLoader } from 'redux-async-loader';
const RenderWithMiddleware = applyRouterMiddleware(
useAsyncLoader(),
);
render(
<Provider store={store} key="provider">
<Router history={browserHistory} render={(props) => <RenderWithMiddleware {...props} />} />
</Provider>
, el);
If you are using react-router-scroll, it should be applied after redux-async-loader.
import useScroll from 'react-router-scroll';
const RenderWithMiddleware = applyRouterMiddleware(
useAsyncLoader(),
useScroll()
);
4. Async data loading by routing (both client and server-side rendering)
import { connect } from 'react-redux';
import { asyncLoader } from 'redux-async-loader';
class UserList extends React.Component {
// ...
}
export default asyncLoader((props, store) => store.dispatch(loadUsers(props)))(
connect({ ... }, { ... })(
UserList
)
);
or, with decorator:
@asyncLoader((props, store) => store.dispatch(loadUsers(props)))
@connect({ ... }, { ... })
export default class UserList extends React.Component {
// ...
}
or, with recompose:
import { compose } from 'recompose';
export default compose(
asyncLoader((props, store) => store.dispatch(loadUsers(props))),
connect({ ... }, { ... })
)(class UserList exptends React.Component {
// ...
});
Unlike redux-async-connect, redux-async-loader itself doesn't connect to store. You have to call connect() explicitly if you want to use store's state.
If you want to invoke asyncLoader()
when just querystring (not path) is changed, you must specify key names of querystring to router.
<Route path="items" component=ItemList asyncLoaderProps={{queryKeys: "q, page"}} ... />
Or, you can use the wildcard for any keys of querystring:
<Route path="items" component=ItemList asyncLoaderProps={{queryKeys: "*"}} ... />
5. Async data loading by mounting/updating (client-side rendering only)
import { connect } from 'react-redux';
import { deferLoader } from 'redux-async-loader';
class UserList extends React.Component {
// ...
}
export default deferLoader((props, store) => store.dispatch(loadUsers(props)))(
connect({ ... }, { ... })(
UserList
)
);
or, with decorator:
@deferLoader((props, store) => store.dispatch(loadUsers(props)))
@connect({ ... }, { ... })
export default class UserList extends React.Component {
// ...
}
or, with recompose:
import { compose } from 'recompose';
export default compose(
deferLoader((props, store) => store.dispatch(loadUsers(props))),
connect({ ... }, { ... })
)(class UserList exptends React.Component {
// ...
});
API
asyncLoader(loader)
Creates Higher-order Component for async data loading by routing.
Arguments
loader
(Function): Called when this component is routed.- Arguments
props
(Object): The props passed from React-Router. See React-Router API docs for more info.store
: (Object): Redux's store object.
- Returns
- (Promise): Fulfilled when data loading is completed.
- Arguments
Returns
- (Function): Creates higher-order component.
- Arguments
- wrappedComponent (Component): Wrapped component.
- Returns
- (Component): Wrapper component.
- Arguments
deferLoader(loader)
Creates Higher-order Component for async data loading by mounting and updating.
Arguments
loader
(Function): Called when this component is mounted or updated.- Arguments
props
(Object): The props passed from parent component.store
: (Object): Redux's store object.
- Returns
- (Promise): Fulfilled when data loading is completed.
- Arguments
Returns
- (Function): Creates higher-order component.
- Arguments
- wrappedComponent (Component): Wrapped component.
- Returns
- (Component): Wrapper component.
- Arguments
loadOnServer(renderProps, store)
Loads async data on the server side.
Arguments
renderProps
(Object): The props passed viamatch()
's callback. See React-Router API docs for more info.store
(Object): Redux's store object.
Returns
- (Promise): Fulfilled when data loading is completed.