React Redux tutorials for beginners-6

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.

React-redux hooks

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.

HooksEggContainer.js

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

App.js

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

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().

HooksEggContainer.js

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

localhost

Multiple Reducers

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.

chickenTypes.js

The content of chickenActions.js is below.

chickenActions.js

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

index.js

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

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.

rootReducer.js

After that back in store.js use the rootReducer.

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.

HookChickenContainer.js

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

App.js

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

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.

HookChickenContainer.js

Similarly, update state in HookEggContainer.js file.

HookEggContainer.js

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

EggContainer.js

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

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.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Software Automation Frameworks Part I: CasperJS and PhantomJS

This.JavaScript: State of Frameworks- Polymer/Web Components Update

Writing Angular Test Cases for Router, Service, ActivatedRoute

Exploring Arrays in IBM BPM Part 1

Why Don’t We Use Other Frameworks Instead of React?

The easiest way to set up server-side rendering with React and axios

How to use React’s Context API like a Redux Store

Introduction To 11 Core JavaScript Functions That Will Improve Your Code Quality

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
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

React State Management Libraries for 2022

ReactJS Tutorial Part #5 ~ State and Props

Learning React with TypeScript by Building an API app

React Hooks- Part 2