React Redux Async Render
It's set of few middlewares and helpers for rendering React/Redux applications with async actions like getting data from API without changing data flow in application.
Usage
Simply, register asyncMiddleware
, repeatMiddleware
or ignoreNodeMiddleware
to your Redux store.
Using simple async
, repeat
and clientOnly
properties in your actions which goes through Redux store, you can handle how they work.
Async middleware
It's used to handle if application is in working
or idle
state.
When fired action has async
property set to start
- async jobs counter is incremented, end
- decremented.
Best way to get through async actions is to prepare request
and finish
action for each of them.
Remember, that if you want to dispatch these actions on mounting component do it in componentWillMount
instead of componentDidMount
method!
const middleware = middleware // checks if there are async methods running right nowmiddleware // callback ran when it's ready, returns unregister function to clear its reference
Repeat middleware
It's not so common to use. Mainly it's needed when you're subscribing somewhere, e.g by WebSocket. Add repeat: true
to your action to queue it.
const middleware = middleware // array of queued actionsmiddlewareclear // clear list of queued actions
IgnoreNode middleware
It's middleware to prohibit some actions of being dispatched on server-side (e.g. subscribing - combined with repeat middleware).
Add clientOnly: true
to your action to use it. Remember, that it should be added before any other middleware (or after repeat middleware).
const middleware =
Render helper
It's combining all of this things together. It needs react-dom
to be installed.
You have to provide to it callback ({ html, state, actions }, err)
and some options.
Later you can find some example
To do
- Add
timeout
option for async render - Add possibility to override
ReactDOMServer.render
method - Add examples (+ instructions how to use it in real code)
- Prepare missing unit tests