IsomorphicUniversal app with redux as Flux library and redux-devtools hot-reload tools
- expressjs
- reactjs ^0.14
- react-router 1.0.0-rc3
- redux ^3.0.0
- redux-devtools ^3.0.0-beta-3
- react-redux ^4.0.0
- postcss
- precss
- webpack
- babel
shared/redux-resolver.js is the magic thing about the boilerplate. It's our tool for resolving promises (data-fetching) before server side render.
The resolver is available on the store instance through components context, use it to wrap your async actions in componentWillMount for data to be fetched before server side render:
import { bindActionCreators } from 'redux';
import * as Actions from 'redux/actions/Actions';
[...]
static propTypes = {
dispatch: PropTypes.func.isRequired
}
static contextTypes = {
store: PropTypes.object.isRequired
}
componentWillMount() {
const { dispatch } = this.props;
const { resolver } = this.context.store;
this.actions = bindActionCreators(Actions, dispatch);
return resolver.resolve(this.actions.load, {id: 10});
}The action this.actions.load will be resolved instantly on browser. On the other hand, on server side a first render React.renderToString is called to collect promises, resolve them and re-render with the correct data.
$ git clone -o upstream https://github.com/savemysmartphone/universal-redux-boilerplate.git$ cd universal-redux-boilerplate && npm install$ npm run dev
(Don't forget to add your remote origin: $ git remote add origin [email protected]:xxx/xxx.git)
You can fetch the upstream branch and merge it into your master:
$ git checkout master$ git fetch upstream$ git merge upstream/master$ npm install
$ npm run build$ npm run prod