ReactJS / Redux Tutorial – #7 Connect ReactJS and Redux

00:00:00 so we learned all about this redox flow
00:00:03 here and that's all nice but it has
00:00:06 nothing to do with react right I always
00:00:09 said that you could use it with plain
00:00:10 JavaScript with angularjs what was with
00:00:13 whatever you want but here we want used
00:00:17 with react je s and in order to do so I
00:00:21 need to add another import or another
00:00:24 package to my application I need to
00:00:27 install react Redux add T save flag so
00:00:34 why do I need react reacts
00:00:35 we already got react and we already get
00:00:38 Redux right yeah and react reacts is the
00:00:41 bridge read access standalone doesn't
00:00:45 need react and react as standalone
00:00:47 doesn't need read acts but react read
00:00:49 acts the package I just installed is the
00:00:52 bridge between both so react reacts
00:00:55 allows me to take my old application
00:00:58 here and hook it up so how do i hook it
00:01:01 up then well let me create a new
00:01:06 component here which I'll name app
00:01:11 Chasse and I'll use all my old code here
00:01:16 the one I commented out besides the
00:01:20 render function I don't need this in my
00:01:22 app component commented in remove the
00:01:27 render import as I said I don't need
00:01:29 that adjust these imports because now
00:01:33 app is the same folder as the other
00:01:35 components here and I will remove this
00:01:40 state related thing here because state
00:01:43 will now be handled by Redux and you'll
00:01:45 soon learn how so here I'll just pass
00:01:51 Max and again I will change this later
00:01:55 on so now I get my app component but
00:01:59 still it's not hooked up right well
00:02:02 let's go back to the index dot J's file
00:02:05 remove everything but the imports here
00:02:09 do you react imports and the render
00:02:12 function down here
00:02:13 and comment that in but I'll also take
00:02:16 my render function your leave to import
00:02:20 at the top and I'll set it here at the
00:02:22 end of the file doesn't really matter to
00:02:25 be honest I'll remove all my dispatches
00:02:29 here because we will soon do this from
00:02:31 the react app and now I got my render
00:02:34 method here I want to render app now in
00:02:37 order to do this I need to import that
00:02:40 from components and an app so here I can
00:02:49 import app only if I export it in this
00:02:53 app dot chess file here though so I'm
00:02:57 importing app and now I'm rendering app
00:03:00 here so with this oops I also need to
00:03:05 shouldn't have removed that I also need
00:03:07 to add my react import here at the top
00:03:10 again so if that if I reload this will
00:03:14 go back to the application
00:03:16 you see it's now running of course this
00:03:17 button is not working now we got it
00:03:19 running again but we don't he we don't
00:03:22 have it connected yet we have our
00:03:24 application but it's not connected to
00:03:27 redux at all in order to connect it I
00:03:31 have to do two steps I want to connect
00:03:35 my reaction with the Redux stored so
00:03:40 that the state is passed from the store
00:03:42 to my react app and then I want to be
00:03:47 able to dispatch actions so these blue
00:03:49 both or these two directions are needed
00:03:51 well let's first connect the store with
00:03:54 the react app I do this by adding
00:03:57 another import here at the top I need to
00:03:59 import something from react read X and
00:04:04 this something here is called provider
00:04:09 because it provides us to store this
00:04:13 provider is then use here in the render
00:04:16 method I'm just splitting this to make
00:04:18 it a bit easier to read like so this
00:04:23 providers then use here and wraps our
00:04:26 app
00:04:29 like this I'll explain this in a second
00:04:34 so our app component is wrapped by this
00:04:37 provider component which is provided by
00:04:40 the react Redux package now as you
00:04:44 already see this wants to give me a
00:04:46 store in my ID kind of auto-completed
00:04:49 that wrongly but it wants to pass a
00:04:51 store as a prop kind of and this should
00:04:56 refer to my store here to this constant
00:04:59 so I'm passing my react store to the
00:05:02 store property of this provider
00:05:05 component and then I'm wrapping my whole
00:05:07 app and that's important my whole app my
00:05:10 root component in this provider area
00:05:13 here or a provider of every provider
00:05:16 component here so that is how we connect
00:05:19 the store to our redux app however this
00:05:24 doesn't change our application here it

00:05:26 still looks fine we don't have an error
00:05:29 that's only some hot reloading stuff
00:05:31 here but it's also not really using the
00:05:35 store in order to use the store I need
00:05:40 to do something in my app dot J's file
00:05:43 here I hooked up my state my store tree
00:05:48 whole application but now I need to hook
00:05:51 up or to define which properties of my
00:05:57 state I need in which component and
00:06:00 which actions I want to dispatch there
00:06:04 so these are the two things I need to
00:06:06 tell read acts which properties to I'd
00:06:08 want to use in my component and which
00:06:11 actions so this is done through two
00:06:16 methods the first one I'll define it as
00:06:19 a constant here is called map state to
00:06:22 props now of course you could change the
00:06:25 name here but that's the default name
00:06:27 you you use and you seen the
00:06:29 documentation and which is pretty
00:06:31 explicit about what it does map state to
00:06:35 props means which properties of my
00:06:40 global
00:06:40 application state do I want to use in
00:06:43 this component and then to which local
00:06:47 properties in this component do I want
00:06:50 to map them therefore this is a Fed
00:06:53 arrow function which gets the state
00:06:55 passed from redux and here in the
00:07:00 function body all I do is I return a
00:07:04 JavaScript object where I create key
00:07:06 value pairs where the key is the
00:07:09 property name as I can use it in my
00:07:12 component so let's say here I one to
00:07:17 access all the user related stuff well
00:07:22 then I can access user state and here
00:07:27 reducer and math would be state math
00:07:32 reducer and if you don't want to use the
00:07:35 reducer names here you can also go to
00:07:38 your in extra chase file here when we
00:07:43 combine the reducers you can of course
00:07:45 also assign different names to the keys
00:07:48 so math and user for example and then
00:07:51 you could use just user and math so here
00:07:57 I'm using all the properties of my
00:08:01 global State from both reducers and this
00:08:03 allows me to use them like this I can
00:08:07 simply output or pass the user name as
00:08:10 we do it here as a prop to my user
00:08:15 component and how do I access my user
00:08:17 name simply by accessing this props and
00:08:20 Redux will now automatically populate my
00:08:24 props does is still the react.js props
00:08:27 property that one you learn and you
00:08:30 react us basics course Redux all
00:08:32 automatically creates them for me or
00:08:34 populates them for me and here i access
00:08:37 user this one here this key is set up
00:08:42 here where a map my state two props so
00:08:45 this is the one automatically created by
00:08:46 redux well and user has this name
00:08:52 property because now we're here
00:08:54 we're in the user reducer and here the
00:08:57 state has a name and an age so here I
00:09:00 can access name if I save this well we
00:09:08 get a problem here because right now
00:09:12 this is not happening just because I
00:09:14 create my constant here doesn't execute
00:09:16 this function right I just created a map
00:09:18 state two props method here but I'm not
00:09:22 executing it
00:09:22 therefore when trying to access this it
00:09:25 of course doesn't find it because right
00:09:27 now rejects is not giving me this I
00:09:29 haven't executed this map stay to props
00:09:32 function so in order to execute it I
00:09:36 will have to call another function
00:09:40 Connect connect connects react.js riff
00:09:45 redux we already did this with the
00:09:48 provider here keep this in mind but here
00:09:51 we only provide the store we then also
00:09:53 have to connect each component which
00:09:55 needs access to the store so connect
00:09:58 here expects a map state two props
00:10:01 function without parentheses it will get
00:10:04 executed automatically but it also
00:10:07 expects another function here and my IDE
00:10:10 is already telling me this map this
00:10:12 patch two props that's the second part
00:10:16 where we then setup which actions
00:10:19 actions we want to use in this component
00:10:21 so I'm copying my constant here map
00:10:25 state to props and name it to map
00:10:28 dispatch to props now map dispatch to
00:10:32 props takes an argument which I'll name
00:10:35 this patch here and this also returns a
00:10:38 JavaScript object where I also set up
00:10:41 key value pairs where the key is the
00:10:43 prop name created by redux for me but
00:10:47 the value is a action a method which

00:10:51 gets executed so for example we could
00:10:54 have a set name method here set names
00:10:57 the props name then use a fed arrow
00:11:00 function where I then have name as an
00:11:05 argument and we're here simply
00:11:08 call my dispatch method them and the
00:11:11 dispatch method expects to get what well
00:11:15 of course the same definition as we used
00:11:20 in previous videos so the type of the
00:11:22 action which should be set name and the
00:11:26 payload so let's set this to name the
00:11:32 argument I'm passing here of course all
00:11:34 these argument names here are totally up
00:11:36 to you you could name them to whatever
00:11:38 you want name them so with that I can
00:11:41 pass map
00:11:42 dispatch to props here although without
00:11:46 parentheses and then this connect method
00:11:50 here will actually return me another
00:11:53 function this function then takes my app
00:11:58 here therefore I remove the export
00:12:02 keyword here from this class this is now
00:12:05 passed as an argument to the function
00:12:07 this connect function returns me and
00:12:10 instead I whoops did not want to do this
00:12:14 instead I export this as a default I did
00:12:20 a lot here and we're not quite finished
00:12:23 but here's a good point to stop and make
00:12:25 sure that everything is clear until now
00:12:27 because it's key to understand and I
00:12:30 know that this have been some
00:12:32 complicated steps so what's happening
00:12:35 here I'm calling the connect function in
00:12:37 my app to chase file the file where I
00:12:40 create my react.js component
00:12:42 I'm calling the connect function because
00:12:45 I want to tell react Redux that I want
00:12:48 to connect this component here to my
00:12:51 Redux store yes I'm already providing
00:12:54 the store for my whole application but
00:12:57 it does not mean that it automatically
00:12:59 connects all my components and that's a
00:13:02 good thing
00:13:03 because this way I can choose which
00:13:06 properties of the global state and store
00:13:09 my component needs I do tell react
00:13:13 reacts which properties and actions I
00:13:16 want to use with these two methods here
00:13:18 dual functions the map state
00:13:22 perhaps function and the map dispatch to
00:13:24 profs function the first one tells
00:13:27 reactors which properties of the global
00:13:30 state do I want to use in this component
00:13:33 and to which local properties accessible
00:13:37 through the props keyword do I want to
00:13:39 map them in my component the map
00:13:42 dispatch to props action or function
00:13:45 here that's the same but now not for the
00:13:48 properties of the global state but
00:13:50 instead for the actions I can execute
00:13:52 and well send to my reducers in the map
00:13:57 dispatch – props function here I also
00:14:03 map key value pairs set name for example
00:14:06 which will also be accessible through
00:14:08 this dot props but the thing I mapped
00:14:12 the value is not the value of any state
00:14:16 property instead it's a function which
00:14:19 dispatches an action and inactions just
00:14:22 a JavaScript object with the type and
00:14:24 the payload this function year happens
00:14:28 to have an argument name you might also
00:14:30 have some actions or functions which
00:14:32 don't have an argument but here I want
00:14:35 to set a name and I want to be able to
00:14:37 pass this name dynamically which is why
00:14:39 I passed us an alternative would be to
00:14:42 hard-code a name here but I don't want
00:14:44 to do this
00:14:46 so this connect functions then executes
00:14:49 it tells me what to wire up and this
00:14:54 connect function then returns another
00:14:57 function that's done by react Redux it
00:15:01 returns me a number function which then
00:15:03 expects to get the component which I
00:15:05 want to hook up until this point here
00:15:09 the blue lis marked one we haven't told
00:15:11 it yet so which allows me to temp tell
00:15:14 it which component do it when I hook up
00:15:16 the app component in this case the one
00:15:19 here and this whole thing here the
00:15:22 second function call here then gives me
00:15:26 back a hooked up component kind of which
00:15:30 I then export from this file and in
00:15:33 order to use this
00:15:35 I then have to go to my index.js file
00:15:37 and here we're an import app I have to
00:15:41 remove the parentheses to call it braces
00:15:43 because now I use a default export and
00:15:47 an es6 you don't use curly braces if you
00:15:50 have a default export in the file you're

00:15:53 importing you may choose any name you
00:15:55 want to do choose here here I use app so
00:15:59 that I can leave this killed as it is
00:16:01 but now I'm importing oops I'm importing
00:16:09 the wired-up
00:16:10 component which is created by the
00:16:13 connect method connect function here
00:16:17 with all this setup there's one thing
00:16:21 left to do connect of course is a
00:16:23 function which isn't known yet so I have
00:16:26 to add the import at the top and import
00:16:29 connect from react Redux
00:16:32 so add this import here with this if I
00:16:37 reload my application you see it's
00:16:39 running fine the button is still not
00:16:41 working but the user name max is
00:16:44 displayed correctly and keep in mind
00:16:47 this user name is already using react
00:16:50 reacts because I'm passing the user name
00:16:52 here as a property to my user component
00:16:55 this user component is not wired up to
00:16:58 read X it gets us data passed from the
00:17:02 parent classic reaction so we're here
00:17:05 but my app component which passes the
00:17:08 data to the child this year this props
00:17:12 user dot name uses my Redux state
00:17:16 because this props user refers to this
00:17:19 user property I wire up here and that's
00:17:22 important to understand as a side note
00:17:25 there's nothing wrong with still passing
00:17:28 props to subcomponents indeed that's not
00:17:31 just not wrong that's a good pattern to
00:17:33 use you don't want to hook up every
00:17:36 component in your application to read
00:17:38 acts only once which need to be hooked
00:17:41 up but it's totally fine to still pass
00:17:45 data down you just want to avoid these
00:17:48 complex constructs where you have to
00:17:50 handle state in all kinds of components
00:17:53 and really gets out of hand where to
00:17:56 handle what with this it's now also time
00:17:59 to change the way we change this
00:18:03 username I'm no longer using this change
00:18:06 username bind anything like this I can
00:18:09 get rid of this I'll also get rid of the
00:18:12 constructor instead here what I want to
00:18:17 do is I want to use this props whoops
00:18:22 one dot is enough props and then here
00:18:26 I'm mapping set name so set name now
00:18:32 since I want to pass an argument here
00:18:33 I'll make it easy by using a fat arrow
00:18:36 function here which allows me to execute
00:18:39 set name without executing it
00:18:41 immediately so set name and here I'll
00:18:45 hard code and I introduce though of
00:18:48 course you could also fetch the value
00:18:50 from an input or whatever you wanted you
00:18:53 so with this if I reload the application
00:18:56 and click this button now it's changed
00:18:58 to an ax and you also see that our
00:19:01 middleware
00:19:02 is getting active here and is executed
00:19:06 whenever I click on this so even though
00:19:08 the text doesn't change anymore you
00:19:10 still see I'm dispatching actions as I
00:19:13 click on this button and this is how I
00:19:16 hook this up again keep in mind only the
00:19:19 app component is hook up of course you
00:19:21 may hook up any component you need to
00:19:23 connect to read X but here only the app
00:19:26 component is connected and then average
00:19:29 components receive their data through
00:19:31 props being passed down to them but if
00:19:35 you wanted to avoid passing this change
00:19:38 user name action as well a callback here
00:19:42 to my main component you could also hook
00:19:44 up the main component directly to Redux
00:19:47 and therefore get rid of this part here
00:19:50 for example that would work too and
00:19:52 would be a nice challenge to implement
00:19:54 wouldn't it so definitely go ahead and
00:19:57 try this

You may also like