- 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