React Redux tutorials for beginners-8

React-redux

Welcome to part-8 of the series. You can find part-7 here. We will learn to add a payload to action and also additional props in mapStateToProps and mapDispatchToProps.

Action Payload

We will learn to add payload to action creator. In our react-redux application, we can buy only one egg. Now, we will add the logic to buy multiple eggs by specifying it in a input text.

Create a new file NewEggContainer.js inside the components folder. The content is almost same as EggContainer.js file, but the changes are marked.

NewEggContainer.js

Now, it’s time to change the action creator because we are now passing arguments to it.

So, open the eggActions.js file and pass the number parameter. Here, we are also passing the default parameter of 1 because we are not changing the logic of other containers. Next, we are returning the payload as number.

eggActions.js

Next, it’s time to update our reducer. Here, instead of reducing by 1 we will reduce by action.payload.

eggReducer.js

Now, include the NewEggContainer in App.js to test it out.

App.js

Now, goto localhost to test it out and it is working fine and the other functionalities are also ok.

New Functionality

mapStateToProps ownProps

We will look into an additional detail for mapStateToProps. We can have a second parameter to mapStateToProps beside the global state which is mapped to component props.

To understand that we will create a new file ItemContainer.js inside the components folder. Here, in the mapStateToProps we are having a second argument ownProps. We are then checking if ownProps.egg is passed then the itemState is equal to state.egg.numOfEggs or else state.chicken.numOfChickens

We are displaying the same in our component.

ItemContainer.js

Now, back in App.js we will call the ItemContainer twice and once with the props egg.

App.js

Now, in the localhost we can see the two ItemContainers, corresponding to state of egg and chicken respectively.

Egg & Chicken

mapDispatchToProps ownProps

We will look into an additional detail for mapDispatchToProps. It is similar to what we look for mapStateToProps.

Back in ItemContainer.js we add the logic for dispatch based on whether a props is passed. We also have a button to call the type of dispatch.

ItemContainer.js

Now, in the localhost we can see the two buttons and click of it changes the state of egg or chicken.

Egg or Chicken

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

Let’s Start a Journey With JavaScript

Callback, Promises & Async/Await The Difference!

Using Angular-Elements in a Chrome Extension

🐍 Build a Snake Game in TypeScript

Promises and async functions with NodeJS FileSystem —  await fs.read(article)

Building a Location-Based App with Appwrite

Pins on a map

Top 5 new features in Selenium 4

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

Best Practices for Writing React Components

Learning React with TypeScript by Building an API app

How to implement multiple layouts using React router V4