React Redux tutorials for beginners-5

Image for post
Image for post
Redux

Welcome to part-5 of the series. You can find part-4 here.We will learn about using redux with react in this part and hence the most practical part.

We will first start with the setup for react-redux. So, open up your terminal and create a new react project by the below command.

npx create-react-app react-redux-demo

After the installation is done, then change to the directory and npm install the redux and react-redux dependencies.

Image for post
Image for post
npm install

We will first do the basic setup. So, create a folder components inside src and a file EggContainer.js inside it. For now, put the basic content in it.

Image for post
Image for post
EggContainer.js

Now, remove the basic content from App.js and put the below content in it.

Image for post
Image for post
App.js

Now, in terminal run npm start and when we move to localhost, we can see the below.

Image for post
Image for post
localhost

Now, our React redux app is also quite similar to the redux app, which we had created before. It contains the same cycle.

Image for post
Image for post
React redux

We will first create our Action creator. Create a new folder redux inside src folder. Inside the redux folder, create an egg folder and two files eggActions.js and eggTypes.js.

Put the below content in eggActions.js file. Here, we are creating a simple action creator.

Image for post
Image for post
eggActions.js

Next, in the eggTypes.js, we will just put the constant.

Image for post
Image for post
eggTypes.js

We will next create the Reducers and it will also be similar to the redux thing, which we had learned. So, create a file eggReducer.js inside egg folder and the below content in it.

Here, we are having an initialState and the usual switch case. Inside the switch case, we are returning a new state, by reducing one from the stare.

Image for post
Image for post
eggReducer.js

Now, we will create the store and for that create a file store.js inside redux folder. Here, we are using the reducer to create the store.

Image for post
Image for post
store.js

Next, we will provide the redux store to our application. We can do this by using it in our App.js. Here, we import it and them wrap the whole jsx of App with the Provider as shown below.

Image for post
Image for post
App.js

Now the final part of the puzzle, is back in EggContainer.js file. But before doing so, we need to export our action creator, so create a file index.js inside the redux folder and put the simple export statement.

Image for post
Image for post
index.js

Next, in EggContainer.js we do the following changes. Here, we have two new functions — mapStateToProps and mapDispatchToProps.

The mapDispatchToProps is used to dispatch the action buyEgg to the Action creator and is triggered when we click on the button. It will then trigger the reducer, which will change the state and then the mapStateToProps will receive the updated state. It will trigger a re-render and will show the new Number of Eggs.

We also need to use the HOC connect in react-redux projects.

Image for post
Image for post
EggContainer.js

Now, back to localhost, when we click the button the Number of eggs is decreased.

Image for post
Image for post
localhost

This completes part-5 of the series. You can find part-6 here.

You can find code till here in this github repo.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

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