Skip to content

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

Notifications You must be signed in to change notification settings

abhijeetNmishra/universal-redux-boilerplate

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

89 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 99.0%
  • CSS 1.0%