React Redux tutorials for beginners-8


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.


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.


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


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


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.


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


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.


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

Basic Javascript for beginners

Use enum in database and TypeScript, you gain on storage, readability, maintainability (if extra…

缉魂~(𝟐𝟎𝟐𝟎-𝐙𝐇)~新的完整版本~【𝐓𝐡𝐞 𝐒𝐨𝐮𝐥】𝐇𝐃

Creating Forms Inside Modals with ng-bootstrap

React Native Unicorn — UI Kit

An editable table with React, Material UI and React Virtualized

Learning Go Lang Day 4— Learning the difference between Arrays and Slices #100DaysOfCode

Amazon s3 bucket image upload using node.js

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

Learning React with TypeScript by Building an API app

Learn core Redux — The easiest way you can imagine

Scope in JavaScript

Authentication using the Auth0 to an React application