Electrode Redux Router Engine handles async data for React Server Side Rendering
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Electrode Redux Router Engine

NPM version Build Status Dependency Status


This repo has been moved here

Handle async data for React Server Side Rendering using react-router, Redux, and the Redux Server Rendering pattern.


$ npm install -save electrode-redux-router-engine


You need to specify your routes according to react-router's specs.

For example, a file routes.jsx:

import { Route, IndexRoute, Redirect } from "react-router";

export default (
  <Route path="/test" component={Page}>
    <IndexRoute component={Home}/>
    <Redirect from="source" to="target" />

For each route, you can add an optional attribute methods to specify the HTTP methods you want the route to allow.

i.e. <Route methods="get,post" path="/form" component={Form}>

If the attribute is not specified then it's defaulted to "get".

And an example using the Redux Async Actions pattern:

const ReduxRouterEngine = require("electrode-redux-router-engine");

function createReduxStore(req, match) {
    // this refs to engine

    const store = configureStore();

    return Promise.all([
      // dispatch any other asynchronous actions here
    ]).then( () => {
      return store;

const routes = require("./routes");

const engine = new ReduxRouterEngine({routes, createReduxStore});

// express or Hapi route handler:

function handler(req, res) {
    .then( (result) => {
      // send full HTML with result back using res



Where options could contain the following fields:

  • routes - required The react-router routes
  • createReduxStore - required async callback that returns a promise resolving to the Redux store
    • It should take (req, match) arguments where match is react-router's match result.
    • If it's a function then its this references the engine instance.
  • withIds - optional boolean to indicate whether to render with react-dataids.
  • stringifyPreloadedState optional callback to return string for the preloaded state
  • logError - optional callback to log any error
    • It should take (req, err) arguments
    • If it's a function then its this references the engine instance
  • renderToString - optional callback to provide custom renderToString
    • It should take (req, store, match, withIds) arguments

engine.render(req, options)

Method to render a route.

  • req - express/Hapi request object
  • options - override options passed to constructor
    • withIds
    • stringifyPreloadedState
    • createReduxStore

If everything worked out, then it returns a promise resolving to:

  status: 200,
  html: // string from React renderToString,
  prefetch: // string from stringifyPreloadedState

If error occured, then it returns a promise resolving to:

  status: react-router status or 500,
  message: err.message,
  path: // request path,
  _err: // original error object

If no route matched, then it returns a promise resolving to:

  status: 404,
  message: `router-resolver: Path <path> not found`

If react-router found a redirect route, then it returns a promise resolving to:

  status: 302,
  path: // redirect location

Built with ❤️ by Team Electrode @WalmartLabs.