Universal Redux Boilerplate
IsomorphicUniversal app with redux as Flux library and redux-devtools hot-reload tools
Libraries
- expressjs
- reactjs ^0.13
- react-router ^1.0.0-beta3
- redux ^1.0.0-rc
- redux-devtools
- cssnext
- webpack
- babel
Documentation
Async data-fetching
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.
How to / Installation
$ 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 origin [email protected]:xxx/xxx.git
)
Update the boilerplate
You can fetch the upstream branch and merge it into your master:
$ git checkout master
$ git fetch upstream
$ git merge upstream/master
$ npm install
Run in production
$ npm run build
$ npm run prod
Learn more
- Official ReactJS website
- Official ReactJS wiki
- Official Flux website
- ReactJS Conf 2015 links
- Learn ES6
- ES6 Features