Need help with react-redux-isomorphic-example?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

431 Stars 79 Forks 86 Commits 11 Opened issues


An isomorphic example built with react and redux , see readme for detailed instructions

Services available


Need anything else?

Contributors list

No Data

Universal Example with React and Redux


This is an isomorphic/universal example built with react and

which utilizes the same codebase on server and browser to correctly handle multiple requests at the same time.

This example was previously built with alt and now fully migrated to

, you might as well compare the two and see the differences.

Feel free to ask questions or send over pull requests.

How to run

$ npm i
$ npm start

Then visit


Upgrade Notes

  • It is highly recommented to always remove
    and reinstall everything to avoid any possible issues

The case for redux

We love react and flux for that it provides a smooth workflow and much simpler mindset to develop applications.

On top of that, redux makes things like 10x easier by transforming

flux store
into pure functions, with no state stored inside, which solved a lot of
issues in other implementations, it also encourages a lot of best practices like
container component
, easy extension points and minimal API surface area.

Under the hood, redux is heavily based on various

functional programming
ideas to make those nice things happen, but don't let the functional aspect of redux scares you off,
as a lib user, you don't really need to know about those inner workings to get started

That being said, it's quite an enjoyable and amazing experience to read through the whole codebase line by line and fully comprehend how things were designed to work in a very different manner, it's truly an eye opener.

In short, if you could only pick up one new skill this summer (2015),

should be on top of your list (and a bit of functional programming knowledge won't hurt too :)

Feature Highlights

  • React, Redux, universal/isomorphic, ES6/7, webpack, babel and all those usual suspects!

  • Uses

    Promise middleware
    for redux to showcase async data fetching along with optimistic updating for each REST API calls
  • Uses

    to greatly simplify
    code by using
    constant mapping
  • Showcase async data fetching solutions with

    before displaying each view (hence no blank screen while waiting for data to be downloaded)
  • Showcase how to easily implement

    application with
    on the server (and dehydrate the data on the client too)

Goals of the example

  • Reuse the same codebase on both the browser and server without any modification

  • Must be able to handle multiple requests on the server at the same time without polluting each user's data

  • The approach must be easily understandable and simple to develop and maintain so it's strongly fool-proof in a team environment

  • The application can be used in either

    (a.k.a server-rendering) or
    pure client

Why Universal App?

  • Shorter time-to-first-page means better user experience

  • Deep linking into the application for better usability (ie: bookmarks)

  • SEO (of course!)

Technical highlights

1. Learn from mistakes

An early implementation of this example handles the data model wrong by mutating the state passed into each reducer hence causing a lot of strange issues like making

acting funny.

@gaearon, author of both

, was kindly enough to pointed out those mistakes and provided detailed instructions on how to make it right.

Later the example was migrated to use

but the
spirit stays the same.

2. Key things to note about universal implementations

  • We want to reuse all routing rules on both the client and server, no dupe works needed
  • We need to make sure data for each view is fully fetched before rendering to string, this is tricky because most REST API calls are async
  • With redux and react-router in place, all these can be done easily and gracefully with
    , checkout

3. How immutable data model works

was picked for the job for two main reasons:

  1. Immutable source of truth (data model) is easy to reason about, it makes dirty diff fast and the overal app state less error-prone.

  2. The data structure itself is fully fool-proof, meaning no one can accidentally modify the data model and causing bugs that are extremely hard to trace and fix, especially in a large team.

Pay special attention to the use of

data structure and
method used to manipulate data.

4. How container component works

In most redux applications

 is the root container component that holds all child components, it's responsible for fetching application state from outside, stores it, monitor it's 
event and triggers redraw.

There's a nice

function in
 that you could use to cherry pick and monitor only those 
you are interested, by doing so you avoided unnecessary redraw calls hence making the app more performant.

Redux-devtools included

With redux-devtools in place, you can undo/redo changes anytime, just like travelling back and forth in time, it's super neat being able to debug the application at different status.

Pro hint, it can be toggled off by setting

window.$REDUX_DEVTOOL = false;

redux-devtools inaction

Special thanks

Thanks @gaearon for code review and pointing out misc. issues. Lee Byron for bringing

to the world, it makes everything easier, you guys rock!



We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.