Universal Redux Boilerplate

~~Isomorphic~~ Universal app with redux as Flux library and redux-devtools hot-reload tools

Libraries

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 add origin git@github.com: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

Related projects

About

Universal app with redux as Flux library and redux-devtools hot-reload tools

Languages

Language:JavaScript 99.0%Language:CSS 1.0%