- 00:00:00 now in your relaxed application with the
- 00:00:03 flow you already know right now we're
- 00:00:06 having our store and we're having our
- 00:00:08 view our application and in this
- 00:00:12 application as you already saw in the
- 00:00:14 last video we're really only wiring up
- 00:00:17 one component to read acts a rap
- 00:00:19 component the home and/or domain and the
- 00:00:22 usual component they're not wired up
- 00:00:24 they get their data through props that's
- 00:00:28 typical pattern in your reacts react
- 00:00:31 application you typically have multiple
- 00:00:35 components ones that are smart so-called
- 00:00:39 containers and ones that are dumb so
- 00:00:42 called presentation components the dumb
- 00:00:45 components are not directly connected to
- 00:00:48 read acts they don't know about the
- 00:00:51 state that's why they're dumb the smart
- 00:00:54 components the containers they are
- 00:00:56 connected to redux that's why they are
- 00:00:58 smart they know about the state so back
- 00:01:02 in our application the app component
- 00:01:05 here would be a smart component a
- 00:01:07 container because it's connected to
- 00:01:10 redux it's knowing all about the actions
- 00:01:12 and these state already props
- 00:01:15 main and user are dump components and in
- 00:01:20 bigger applications or in smaller ones
- 00:01:23 too if you use Redux you typically split
- 00:01:25 up you have a folder named container
- 00:01:28 which holds all your smart components so
- 00:01:32 the app component and then you have the
- 00:01:34 components folder which has the dump
- 00:01:36 components
- 00:01:36 now since this really is a well dump
- 00:01:40 component there is no need to create a
- 00:01:46 class extending react component here
- 00:01:48 instead we can use a stateless component
- 00:01:52 as taught in the reactor is it serious
- 00:01:55 if you remember this so here I can also
- 00:01:58 simply export a constant called main
- 00:02:00 which is not extending this because it's
- 00:02:03 not a class instead this is a method or
- 00:02:07 a function which gets props passed into
- 00:02:10 it and then simply returns
- 00:02:14 me well some HTML of you what I call it
- 00:02:17 like this here I can then still use
- 00:02:21 props but without the disk keyword just
- 00:02:23 props the one passed here and I can
- 00:02:26 assign or reuse the same pattern here in
- 00:02:29 my user component it's a stateless
- 00:02:31 component to gets the props whoops and
- 00:02:37 simply returns me the HTML of this
- 00:02:44 component like this now in order to use
- 00:02:48 this and to make it work again I'll have
- 00:02:50 to go to my app component first I need
- 00:02:54 your chest the imports my IDE
- 00:02:56 automatically did this but make sure to
- 00:02:58 adjust them to if your IDE doesn't do
- 00:03:01 this and then this should still work but
- 00:03:05 in my index dot J's file I also need to
- 00:03:07 make sure that this import here is
- 00:03:09 adjusted again my IDE did this but make
- 00:03:12 sure you're importing your app from
- 00:03:14 slash container and knots from slash
- 00:03:17 component and this might also be renamed
- 00:03:21 cue containers again adjust this import
- 00:03:24 should hold old so containers should
- 00:03:26 hold all your smart components might be
- 00:03:29 one more than one your containers and
- 00:03:32 components well holds all these
- 00:03:34 stateless the dumb components so if I
- 00:03:37 save this reload my page it should still
- 00:03:41 work fine and it does but now I get this
- 00:03:44 separation of presentation components
- 00:03:46 here in the components folder and
- 00:03:48 containers connected to read X in the
- 00:03:51 containers folder