Implementing redux and react-router v4 in your react app

Okay so without further ado let’s start by installing redux and react-redux into our project.

Posted by on September 3, 2017

Implenting redux and react-router v4 in your react app.

Let’s setup Redux and React Router V4 into your react app.

This post is follow up to my medium post Setup a react project from scratch. If you didn’t read this post click the link and follow along.

If you don’t wanna do that not a problem at all just clone this repo and switch to react-seed branch and start working.

Okay so without further ado let’s start by installing redux and react-redux into our project.

we have installed redux & react-redux which will be used to integrated redux into our react application.

Now let’s create a store.js in our project root directory. In this file, we will configure our redux store.

Before configuring our store let’s understand our folder structure first.

So let’s create some new folders to match our specified folder structure.

let’s create our reducer first. go into your reducers folder and create message.js.

inside our message.js let’s write a very simple reducer

let me walk you through the above code. In the first line, we imported SET_MESSAGE from types.

Then we created our initial state and inside it, we set our message to empty. Then we created our main reducer function inside it, we checked for different action types and updated our reducer state accordingly.

Now let’s create our action types first go to types directory and create message.js.

we are naming related files same so it will be easier for us to maintain them afterward when the application code base grows.

let’s define the type. inside your types/message.js

Our actions are on place let’s create our action file. go to your actions folder and create a message.js

inside actions/message.js create an action named setMessage

In the above code, we create an action setMessage. As a parameter, we passed in the message.

Inside the action, we dispatched an action with type SET_MESSAGE and message as payload.

Let’s configure our store now to make use of our reducers.

We imported our message reducer and passed it into combineReducers.

CombineRducers will combine your reducers all into one and store it inside reducer variable.

In the next line we created our store using createStore. We passed in our combined Reducers and applied redux-thunk middleware.

We are using redux-thunk for using async actions if you want to know more about redux-thunk you can read about it here.

At last we exported our store. Let’s install redux-thunk

Let’s edit our index.js to make use of our new redux store.

We used Provider from the react-redux library which will pass all of the redux store and also provide the dispatch function.

Let’s create a component in which we will be using our actions.

Inside your project directory

Input preview is a component which will render an input component which on update will update our reducer message.

let’s create our component.

Now let’s use InputPreview inside our App.js

you can also see we used connect from react-redux package to connect our store to our component.

let’s extract and pass the message from our reducer to our InputPreview component.

inside InputPreview let’s use this value

Go to your browser and open http://localhost:8080 you will see the text box there but when you will try to type in the text the input value will not update.

That’s because we didn’t pass any onChange function to the input tag.

let’s pass an onChange function to input tag inside your App.js create a method called _onChange

Above on every onchange, we dispatched setMessage action with the new value of our input tag.

Let’s modify InputPreview to make use of our newly created onChange prop.

So in above code, we called the _onChange function on every change to update the value of message in reducer.

Now go to your browser and try to update the input value.

Okay, so we have integrated redux into our application. Let’s implement react router next.

let’s start by installing react-router-dom

Create another container component in containers directory go inside your containers directory and create about.js file.

inside your about.js create a very simple demo react component.

Let’s modify our App.js file to add a link to about component.

Create a routes.js in our project root directory. We will be defining all of our top routes in this file.

Open your routes file and paste this code in it.

We are importing 4 things from react-router-dom.

BrowserRouter: This is our new Router component we define routes inside this component.

Route: This is our route where we define the path & component to load on that route.

Switch: This is a new component in react-router V4 it is used to group two or more routes together.

Link: The link component used to create an tag to link routes together.

We are not using nested routes. React router has a lot of improvements in V4 you should read more about it here.

We imported our containers and passed them to appropriate routes.

Now import Our routes and use them in our main.js file.

We are importing routes as AppRoutes.

Go to your browser and checkout if everything is fine.

Also there will be third a part as well where I will show you how to use webpack for deploying this project from development to production.

Until then share this tutorial with everyone who can find this tutorial helpful.

Hi, My name is Manoj Singh Negi. I am a Javascript Developer and writer follow me at Twitter or Github.

Loved this article ? Here are more stuff for you.

Setting up a React project from scratch

Array Methods Explained : Filter vs Map vs Reduce vs Foreach

React Components Explained

Today I turned 7307 days old. What I learned so far from life

Peace.


Hey there. Follow along.