Universal rendering with React and Redux

How to set up a universal React web application with Redux.

Feb 20, 2017 · 2 min read



is a library that helps manage your state using Flux-like principles. Install it and its official React bindings:

$ npm install redux react-redux


Let’s add Redux on the server-side.

At the top of routes/index.jsx, import Redux and Provider:


Then create a reducer that doesn’t do anything except return the default state that it’s provided:


Now create the store with the props as the initial state:


Finally, update the top-level component to Provider:


You’ll notice that RouterContext's createElement prop is removed. That’s because Redux now manages the state so it’s no longer necessary to merge the props in RouterContext.

routes/index.jsx should now look like this:



To maintain isomorphism, update client.js similarly:


The only difference is that the store’s initial state comes from window.PROPS because this file is run in the browser.

Since we’re using in client.js, we must import React and make it available.

The configuration must also be updated so files with .js extension are transpiled by (line 10):


Don’t forget to restart webpack in the command-line:

# press Ctrl-C to stop the running process first$ webpack -w

Open routes/routes.jsx and remove Router's createElement prop. The file should look like the following:


Connect Component To Store

Let’s connect views/Layout.jsx to the Provider store.

First, import connect at the top of the file:


Then create a that maps the store’s state to the connected component’s props:


As you can see here, the store state from Provider is mapped to Layout’s props.custom with the help of .

Assign the existing component to the variable Layout and pass it in the wrapper to create the connected component:


views/Layout.jsx should look something like this:


When you switch the browser and refresh, you should see that everything still looks and works the same.

If you have installed, you can confirm that the data is being passed from Connect to Layout.

So going forward, you may want to set up actual and for your store. Feel free to check out the for this tutorial as well as other videos in my .

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store