React Redux tutorials for beginners-6

Image for post
Image for post
React-redux

Welcome to part-6 of the series. You can find part-5 here. We will learn about using redux with react with the latest hooks in this part.

This is a new pattern in react-redux, where instead of using the HOC, we can use the hooks provided by redux.

We will first use the useSelector hooks, which is equivalent to mapStateToProps(). Create a new file HooksEggContainer.js in the components folder.

Here, we have imported the useSelector hook from react-redux and using it to get the value stored in the reducer.

Image for post
Image for post
HooksEggContainer.js

Now, we will include it in the App.js file.

Image for post
Image for post
App.js

Now, if we go back to localhost, we can see it.

Image for post
Image for post
Hook Eggs

Now, we will add the useDispatch hook, which is used to dispatch an action and is quite similar to mapDispatchToProps().

Here, we are first importing the useDispatch. After that we are calling it and storing in a variable dispatch. Next, from the button onClick we are calling it to call the action creator buyEgg().

Image for post
Image for post
HooksEggContainer.js

Now, if we go back to localhost and click on the button it will decrease the egg count.

Image for post
Image for post
localhost

Next, we will look into the practical example of having multiple reducers. For this, we will follow the same steps which we did for Eggs.

Inside the redux folder, create a new folder chicken. Create three files chickenActions.js, chickenReducer.js and chickenTypes.js inside it. All the code will be exactly similar to the Egg part.

The content of chickenTypes.js is below.

Image for post
Image for post
chickenTypes.js

The content of chickenActions.js is below.

Image for post
Image for post
chickenActions.js

We also need to make sure to export this action from our index.js file.

Image for post
Image for post
index.js

Next, we will write the code for chickenReducer.js file, which is again similar to it’s egg counterpart.

Image for post
Image for post
chickenReducer.js

Next, we will make the redux store aware of this reducer. And now the concept of combine reducer will come into picture. For this create a file rootReducer.js inside the redux folder. In it add the code to use both reducers, with the help of combineReducers.

Image for post
Image for post
rootReducer.js

After that back in store.js use the rootReducer.

Image for post
Image for post
store.js

Now, to use all these create a new file HookChickenContainer.js inside the components folder. The content for it is exactly similar to it’s egg hook counterpart.

Image for post
Image for post
HookChickenContainer.js

Now, also include it in the App.js file.

Image for post
Image for post
App.js

But, if we go to localhost now it will seems sort of broken.

Image for post
Image for post
Broken

This, is because we have divided the state with the use of combineReducer. So, now we have to use it by the name which we have given in the rootReducer.js file.

So, update state in HookChickenContainer.js file.

Image for post
Image for post
HookChickenContainer.js

Similarly, update state in HookEggContainer.js file.

Image for post
Image for post
HookEggContainer.js

Also, update the state in the HOC based EggContainer.js file.

Image for post
Image for post
EggContainer.js

Now, if we move to localhost everything will work fine.

Image for post
Image for post
Everything fine

This completes part-6 of the series. You can find part-7 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