wait-for-redux-thunk

Simple middleware providing hooks after every async action and a final callback when all async actions are completed. Very useful when building universal react applications with redux-thunk.

Installation

To install the stable version:

npm install --save wait-for-redux-thunk

Use ASYNC_START and ASYNC_END to mark async actions

1import { ASYNC_START, ASYNC_END } from 'wait-for-redux-thunk';
2
3function asyncActionStart(options) {
4	return {
5		type: ASYNC_REQUEST,
6        payload: options,
7		meta: ASYNC_START
8	};
9}
10
11function asyncActionSuccess(data) {
12	return {
13		type: ASYNC_SUCCESS,
14		payload: data,
15		meta: ASYNC_END
16	};
17}
18
19function asyncActionError(error) {
20	return {
21		type: ASYNC_ERROR,
22		payload: error,
23		meta: ASYNC_END
24	};
25}

And waitMiddleware with applyMiddleware from this module

1import {waitMiddleware, applyMiddleware} from 'wait-for-redux-thunk';
2import thunkMiddleware from 'redux-thunk';
3import {createStore} from 'redux';
4import {renderToString} from 'react-dom/server';
5import reducers from './reducers';
6import ReactApp from './reactApp';
7
8// called before first render
9const initFn = (store) => {};
10
11// called when each async action is completed,
12// should return string representing React application
13const renderFn = (store) => renderToString(<ReactApp store={store} />);
14
15// called when all async actions are completed,
16// provides the latest state and render string
17const finalFn = (store, content) => {
18    const state = store.getState();
19
20    res.render('index.html', {content, state: JSON.stringify(state)});
21};
22
23const createMidlewareStore = applyMiddleware(
24    thunkMiddleware,
25    waitMiddleware(initFn, renderFn, finalFn)
26)(createStore);
27const store = createMidlewareStore(reducers);

License

MIT