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.
First things first — before we start configuring our application to use Redux on both the server and the client, we have to install two packages:
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
Now that we have all the necessary packages installed, we can move on to adding Redux to our project. Let’s start from adding reducer — to do it, I’ve added the
reducers folder to the
src directory and placed the
index.js file inside. Please take a look at the content of this 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:
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
Now it’s time to make some changes to the server part of our solution. Please see below the modified
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
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.
As you probably expect, the last thing to do is to amend the client-side code. Please see below the
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.
That’s all for today. I think adding Redux to the server-side rendered React application is quite straightforward. We just have to create the store twice, on the server for the first time, and later again, when the client script is loaded. We also have to share the initial state, but we can use the same mechanism to achieve it, as in the previous example, without using Redux.
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: