Coding

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