Coding

ReactJS / Redux Tutorial – #8 Containers & Components (Smart & Dumb Components)

2 months ago
  • 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

You may also like