React Redux Tutorials - 26 - mapStateToProps

all right in this video I want to go over a small but important detail about the map state the props function if you take a look at the K container component we have the map state the props function it receives the Redux state as its parameter which we can then use as props in our component what I haven't mentioned though is about the second parameter the second parameter to map state the props is basically the props that have already been passed to the component let me help you understand what that means with an example I'm going to start off by creating a new file called item container dot j s within the file I'm going to use the snippet RFC II to create a function component now what we want to achieve with this component is to display either the number of cakes or the number of ice creams based on a prop that is passed from the parent container so this component can be reused for both cakes and ice creams for the JSX I'm going to have an h2 tag that says item where we display either the number of cakes or the number of ice creams next we define our map state two props function and this is the bit we want to focus on Const map state de props is equal to a function this function takes two parameters now the first parameter is the relaxed state and the second parameter is the props of the component itself which by convention is referred to as own props what this basically tries to convey is that hey I know that you're mapping state to component props but here are a few own props that the component has you can make use of it if you want to now what we are going to do is conditionally assigned the redox state for this item container we are going to pass in a prop called cake from the parent component say Const item state is equal to own props dot cake now if that cake prop was passed in we access state dot cake dot of cakes if not we access state dot ice-cream dot number of ice creams finally we return an object where the key is item and the value is item state what we can now do is render props dot item which refers to the redox state variable for either the number of cakes or the number of ice creams prop stock item and make sure to pass in props for this to work though we need to make sure we connect our store with redux so the top import connect from react Redux and then while exporting export default connect map state the props with item container and that is it for our item container I'll now go back to AB dodges and include the component twice and a second time item container for the first one though I will pass in a prop called cake let's save the files and head to the browser you can clearly see that the first component item count is 10 which refers to the number of cakes and the second component is 20 which is the number of ice creams and this is possible because of the cake prop which we have sent from the parent component let's quickly revisit that in the parent component for the first item container we pass in cake as a prop in item container in map state to props we check if that cake props was sent or not if it was sent we access state dot cake dot number of cakes in which case our item container behaves like the cake container if the props was not sent which is the scenario for our second item container over here we access the number of ice creams and the item container behaves like ice cream container now the scenario here for which we have used own props for might be a bit rare in applications what is a common use case though is the master detailed pattern from a list of items when you click on a particular item you would pass in the item ID as a prop and then fetch the data only for that ID from redux so I just wanted to explain about the second parameter how you would use it in your application completely depends on your requirements so that is about map state to props let's quickly take a look at map dispatch - props in the next video

Channel: Codevolution

Views: 58,600

Rating: 4.9528856 out of 5

Keywords: Codevolution, React, ReactJS, Reactjs, ReactJS Tutorial, React Redux, React Redux Tutorial, ReactJS Redux, React Redux Tutorial for Beginners, ReactJS Redux Tutorial for Beginners, mapStateToProps

Id: prg6YzRcEvE

Length: 6min 15sec (375 seconds)

Published: Mon Nov 25 2019