Server-Side Rendering in React — Redux

How to handle Redux store on both the server and the client.

Bartłomiej Dybowski
Mar 25 · 5 min read

Welcome to the third part of my series about the server-side rendering in React. Last time I have described how to configure the project to be rendered on both the server and the client. Today, we will try to add Redux to our previous example.

I assume that you know the basics of Redux so I won’t spent time describing it. If you are not familar with the concept of the Flux architecture and Redux itself, please check its official documentation.

Packages installation

Command to install redux and react-redux packages
Command to install redux and react-redux packages
Add redux and react-redux packages

The redux package just contains the Redux library. The react-redux dependency will help us connecting Redux and React components.

Reducer + changes in the App component

An example of reducer
An example of reducer
The reducers/index.js file

The above reducer handles only one action type: CHANGE_TEXT. It changes the value of the initialText state property. The next thing to do is to amend the App.js component code to dispatch the action on the button’s click. Here’s how we can do it:

Modifications made in the App.js component
Modifications made in the App.js component
The amended App.js component

As you can see, we’ve got rid of the component’s internal state completely. It is because from now on, we will persist the state globally, in the Redux store. Thanks to the connect function imported from the react-redux package, it is possible to inject state properties (the mapStateToProps method) and methods dispatching actions (the mapDispatchToProps function) into the component’s props object.

Server-side configuration

Modifications made in the server.js file
Modifications made in the server.js file
The modified server.js file

Ok, let’s analyze what had changed here. Firstly, please take a look at the imports section: we import the createStore method from the redux package; the Provide component from the react-redux library and our reducers we had just added a few minutes ago.

Now, please see how we use them. By calling the createStore function with reducers and initialState passed as its parameters, we create the Redux store initialized with the initialState object. The next thing to note is that we wrap the App component with the Provider component. We also pass the already created Redux store to this component by its attribute. Thanks to that, the connect function we’ve used in the App.js file has access to the store.

Please also note that we are still passing the initialState object as an attribute of the Html component. As you will see in a moment, we still need it on the client-side.

Client-side configuration

Modifications made in the client.js file
Modifications made in the client.js file
The modified client.js file

We have imported here the same three things as we did in the server.js file. Then, we also create the store passing reducers as its first parameter. The only distinction here is what we pass to the createStore function as an initial state — it is an object created from the values stored in the APP_STATE object. So, we have used the same mechanism to share the initial state between the server and the client.

Of course, the last thing we have done here is to pass the already created store object as an attribute of the Provider compontent wrapping the App component. This way, all the connect methods used in the client-side React components will also have access to the store.

Summary

The example we have discussed today is available in my GitHub repository. I encourage you to clone it and play with it on your own.

I think, now we know a lot about server-side rendering in React, but it is not the end of my series! In the next article, I will show you how to add react-router to our example.


P.S. This post is a part of a series of articles about Server-Side Rendering using React. Please see the list of all items of the series below:

JavaScript in Plain English

Learn the web's most important programming language.

Bartłomiej Dybowski

Written by

Senior Frontend Developer at AppUnite / Blogger / JavaScript / TypeScript / React / Vue

JavaScript in Plain English

Learn the web's most important programming language.

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

More from JavaScript in Plain English

32 funny Code Comments that people actually wrote

10.3K

More from JavaScript in Plain English

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