React Redux Tutorials - 18 - connect

in the previous video we learned how to provide the store to all the components in our application in this video let us learn the final bit and that is how do we get hold of the redux state and how do we dispatch an action from within a react component I'm going to go back to es code and open cake container dot J s cake container is the component where we want to display the number of cakes which is part of the redox state and this is also the component from which we want to dispatch the bye cake action on a button click we are going to achieve the result in three steps first step we are going to define a new function this function is called map state to props you can name it anything you want to but this is the convention and I would recommend you stick to the same this function gets the redux state as a parameter and returns an object in our example we just have the one state property that we are trying to access and that is the number of cakes so within our map state the props function I'm going to specify a property called number of cakes and this is going to be equal to State DOT number of cakes and that is step number one if you are slightly confused just hang on for a few more minutes now one thing I would like to point out here is about selectors if you take a look at the official react Redux documentation they maintain a separate file called selectors so just like actions and reducers there would be selectors what it does is basically return some state information from the redux door in our example selecting number of cakes is pretty straightforward State DOT number of cakes however in larger applications you might perform some data transformation and then select only what is required so instead of writing a couple of lines of code in the maps data props function it is extracted into a separate file called selectors now I am NOT going to do that because our example is really simple and straightforward I just wanted to make you aware of a term called selectors so that you know what the documentation is referring to all right let's move on to step number two this again involves defining a new function this time the function is called map dispatch two props this function gets the Redux dispatch method as a parameter and again returns an object in our application we just have the one action creator so within the object I'm going to create a property called by cake and this is going to be equal to an arrow function which dispatches the action creator from redux now we mentioned the action creator but we haven't imported it yet let's do that what I like to do is create a file called indexes from which I export all the action creators so in the Redux folder create index dot JSP and over here we export the action creator by cake from cake slash cake actions and now back in cake container we can import it as import by cake from redux that is step number two defining map dispatch to props for step number three we are going to connect these two functions with our react component and for that we use the connect function or the connect higher-order component from the react Redux library so at the top import connect from react Redux and at the bottom while exporting our component we connect the two functions export default connect map state the props map dispatched two props with the cake container what this connect function does is basically what the two function names specify in the first function the state from the redux door is mapped to our component props so apart from whatever props cake container was receiving it will now receive an additional prop called number of cakes which reflects the number of cakes in the redox door it's a number of cakes props props dot number of cakes similarly map dispatched props will basically map our dispatch of an action creator to a prop in our component so our component now receives a second additional prop called buy cake which will basically dispatch the buy cake action what this allows us to do is within our component we can now specify on click is equal to props dot buy cake and that is about it if I now save all the files and take a look at the browser you can see that we have the number of cakes set to ten I click on buy click and the count decreases click again the count keeps on decreasing so our cake shop application is working as expected let me go over the code one more time to help you understand how it all works first is map state to props when you want to access the redox state in your component you define the map state to props function it gets the Redux state as a parameter which can be used to retrieve the appropriate state properties in our case we map State DOT number of cakes to a prop called number of cakes which will then render in the JSX similarly for dispatching actions we have the map dispatched to props function this function gets the dispatch method as a parameter and allows us to map action creators to props in art component in our example we mapped dispatching by cake to a prop called by cake this allows us to call by cake as props dot by cake and all this is possible because of the connect function from react Redux the connect function connects a react component to the redux door in our case it connects cake container to the redux door so that is the most basic pattern you can have with react and redux if you are struggling to put the pieces together watch the last few videos on react redux again you will get a much better idea of how to connect your react app with redux all right then thank you guys for watching feel free to subscribe I'll see you guys in the next video

Channel: Codevolution

Views: 124,779

Rating: 4.9182796 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, connect in React Redux, connect, mapStateToProps, mapDispatchToProps

Id: gFZiQnM3Is4

Length: 8min 44sec (524 seconds)

Published: Mon Oct 07 2019