React Redux tutorials for beginners-8

Image for post
Image for post
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.

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.

Image for post
Image for post
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.

Image for post
Image for post
eggActions.js

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

Image for post
Image for post
eggReducer.js

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

Image for post
Image for post
App.js

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

Image for post
Image for post
New Functionality

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.

Image for post
Image for post
ItemContainer.js

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

Image for post
Image for post
App.js

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

Image for post
Image for post
Egg & Chicken

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.

Image for post
Image for post
ItemContainer.js

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

Image for post
Image for post
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.

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