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
react-redux into our project.
we have installed
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
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 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
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
Our actions are on place let’s create our action file.
go to your actions folder and create a
actions/message.js create an action named
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
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
Let’s edit our index.js to make use of our new
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
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 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
Above on every onchange, we dispatched
setMessage action with the new value of our input tag.
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
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.
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
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
We are importing routes as
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.
Loved this article ? Here are more stuff for you.