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

Tailwind Weekly #12: Aaaaand… we’re back 🌟!

5903c8b39527e51bbb79c80354158e71

How To Build a Node.js Application with Docker

Getting started with Gulp 4 for Angular

Basics of Express, Routing & Middleware

CRUD application using NestJS and MongoDB

Step-by-step Procedure to Design a News App with Ionic4 and Angular!

How to Implement OAuth 2 Authentication in Ionic 5/Angular 10

10 JavaScript Interview Questions

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

Getting Started with Redux Saga

React Tutorial — Learn React in 5 hours

REACT JS MASTERING GUIDE — Day 1: Introduction to React JS (Part I)

Simple react app with bootstrap.js