- 00:00:00 we're on a good way here and we already
- 00:00:03 made the split between components and
- 00:00:06 containers though there still is one
- 00:00:09 problem our application would quickly
- 00:00:12 get pretty complex to manage or at least
- 00:00:15 unreadable if it grew more complex
- 00:00:18 because all the redox code is handled in
- 00:00:21 the index dot JSON isn't it typically
- 00:00:28 you would split this up you would create
- 00:00:31 a new folder in your app folder named
- 00:00:33 reducers and you might guess what this
- 00:00:36 folder holds you would also create a new
- 00:00:40 folder called actions so that's the
- 00:00:43 typical split you have and then you also
- 00:00:46 create another file called storage
- 00:00:49 sheäôs which holds your store so let's
- 00:00:52 populate them with live step by step
- 00:00:55 what does the storage JS file do well if
- 00:01:00 we go to the index chess file it of
- 00:01:02 course holds our store this one here I
- 00:01:06 will copy my store or cat it inserted
- 00:01:11 here but I will not set this to be a
- 00:01:14 constant its but instead I will set this
- 00:01:16 to be my default export so the acting
- 00:01:20 this file exports the store created here
- 00:01:23 I also since I use logger here need to
- 00:01:28 import logger from readex logger of
- 00:01:34 course you may get rid of it entirely if
- 00:01:35 you don't want the log messages and you
- 00:01:37 should get rid of it for your production
- 00:01:39 application of course in order to set up
- 00:01:43 a store here we also need to import some
- 00:01:46 things from readex namely the same
- 00:01:49 things we used in the index.js file
- 00:01:51 before so that's create store combine
- 00:01:54 reducers and apply Milla where we also
- 00:01:58 get the problem that these reducers are
- 00:02:00 not in the same file so this will not
- 00:02:02 work for now but I'll come back to this
- 00:02:05 soon in the index dot JS file I'll get
- 00:02:08 rid of my own logger here I'll get rid
- 00:02:11 of the subscription and then I want
- 00:02:14 creating you reducer files here I'll
- 00:02:16 create a new reducer file here which
- 00:02:19 I'll call Mafra user KS and then the
- 00:02:23 number one which will name user read
- 00:02:26 user dot j s now the mod producer file
- 00:02:29 will of course hold my math reducer
- 00:02:33 which I'll cut and copy into here and
- 00:02:35 the user reducer well what will this
- 00:02:38 file hold the user reducer of course now
- 00:02:41 that should be a constant it should be a
- 00:02:44 default export and the same is true for
- 00:02:47 my mofford user your export my index
- 00:02:53 chess fall its get it getting pretty
- 00:02:55 lean here isn't it can get rid of all
- 00:02:58 the imports they don't need anymore
- 00:03:00 I of course still render my app here I
- 00:03:04 still hook it up with the provider
- 00:03:06 component so that is how my index.js
- 00:03:09 file will look like in the store chess
- 00:03:12 file and now I need to import my
- 00:03:14 reducers so I need to import that from
- 00:03:18 RIT users and then MAF reducer and of
- 00:03:23 course user read user and what do I want
- 00:03:26 to import well I could just name this
- 00:03:28 math and user which allows me to again
- 00:03:32 use this shorter way of setting this up
- 00:03:35 like so so now I'm setting up all the
- 00:03:39 reducers if we have a look at the
- 00:03:40 application you see it's not running we
- 00:03:44 get the error that store is not defined
- 00:03:47 which makes perfect sense because in the
- 00:03:50 index chest file where I need to pass
- 00:03:51 store to provider I don't have my store
- 00:03:54 so I need to import that and to import
- 00:03:58 it I'm exporting it here as a default
- 00:04:01 and you store the chair's file so here
- 00:04:03 I'm importing it from store though with
- 00:04:07 dot slash at the beginning to mark it as
- 00:04:09 a relative import store like this now in
- 00:04:13 order to finally make this work I have
- 00:04:14 to adjust my reducer files here in order
- 00:04:17 to be able to export a fat arrow
- 00:04:19 function what I need to do is I need to
- 00:04:23 actually store that in a new constant
- 00:04:26 which I'll name
- 00:04:27 Moff reducer oops
- 00:04:31 like this and then export this Moff
- 00:04:35 reducer constant here without
- 00:04:38 parentheses so simply put a number words
- 00:04:43 make it a constant and then export this
- 00:04:48 constant here like this so if I save
- 00:04:52 this and reload my application it works
- 00:04:55 it works if I click this button so now I
- 00:04:58 split up my reducers I have my smart and
- 00:05:01 dumb components we're still missing the
- 00:05:04 actions though so let's take care about
- 00:05:06 this here I'll also create you new files
- 00:05:09 the math actions and the user actions
- 00:05:16 like so now how do i define such actions
- 00:05:20 actions here i will export multiple
- 00:05:24 functions here I'll name it add number
- 00:05:29 for example we'll get a number here and
- 00:05:33 this will simply return a JavaScript
- 00:05:36 object setting the type add and setting
- 00:05:42 the payload to number so that's just one
- 00:05:47 function I'm going to duplicate this and
- 00:05:50 have my subtract number function here
- 00:05:53 which is also the same but with subtract
- 00:05:58 here as a type and as you can see these
- 00:06:00 types here are or the way I set them up
- 00:06:04 here is just as JavaScript object and
- 00:06:06 dispatching later on that's all these
- 00:06:08 functions are returning they are
- 00:06:10 returning this JavaScript object which I
- 00:06:12 wanted to Spach later on now I'm copying
- 00:06:15 all this and in my user actions I'll set
- 00:06:22 up set name and set H here I'll pass H
- 00:06:27 and name name and age rename this set
- 00:06:34 name and this to set H like this and now
- 00:06:39 to hook this up I'll go to my app chest
- 00:06:41 file and here in the map dispatch to
- 00:06:44 props where I want to hook up set name
- 00:06:46 well I still want you hook up set name
- 00:06:49 and I want to pass name but here I'm
- 00:06:53 calling dispatch on set name and pass
- 00:06:57 this name now what is set name here well
- 00:07:01 set name is something I import from my
- 00:07:03 actions so import from actions math
- 00:07:13 actions here for example and I want to
- 00:07:17 import no not math user actions and I
- 00:07:21 want to import set name like so and it
- 00:07:28 should be double quotation marks outside
- 00:07:30 now to stay consistent so now I'm doing
- 00:07:35 this if I save this reload my app click
- 00:07:38 this button it's still working as you
- 00:07:41 see but now I'm using these actions
- 00:07:43 files now it would be a valid point to
- 00:07:48 ask well what's the advantage I still
- 00:07:52 can't use duplicate action names I still
- 00:07:56 have the same problem as before if I
- 00:07:58 want to use a action with a type of add
- 00:08:03 here I would still have the problem that
- 00:08:06 I also trigger my math reducer which
- 00:08:09 listens to add right and now I split it
- 00:08:13 up over multiple files but what's the
- 00:08:16 advantage of this the advantage is that
- 00:08:18 in bigger applications it's much easier
- 00:08:21 for you to manage your actions and
- 00:08:24 reducers you're probably seeing the
- 00:08:27 pattern here that I have math actions
- 00:08:29 and am off reducer user actions and a
- 00:08:31 user reducer and I have clear clear
- 00:08:34 mappings of what I want to use there it
- 00:08:37 makes very easy for me to maintain
- 00:08:40 bigger applications to add new actions
- 00:08:43 to change existing ones and to make sure
- 00:08:45 that I'm using these actions in the
- 00:08:50 right way or that I don't get one big
- 00:08:54 file
- 00:08:55 all factions and one big file off
- 00:08:57 reducers but instead I split them up by
- 00:08:59 features which makes it far more
- 00:09:02 manageable regarding the issue of having
- 00:09:06 the problem that I overwrite my my names
- 00:09:11 for my types here well one workaround
- 00:09:14 would simply be to prefix your types so
- 00:09:17 you could see say that set that you have
- 00:09:20 user set name here at the beginning
- 00:09:22 since we're in the user actions file and
- 00:09:26 then of course you will also change your
- 00:09:27 reducer to listen to user set name and
- 00:09:30 so on so that overall makes your
- 00:09:33 application much more manageable and
- 00:09:34 much cleaner now rightfully you would
- 00:09:38 say that we're using a lot of
- 00:09:40 boilerplate code here for this very
- 00:09:43 basic app here and you would be right
- 00:09:46 such a simple app is probably nothing
- 00:09:49 where you want to use Redux but in more
- 00:09:51 complex apps you'll quickly see it shine
- 00:09:54 and this initial boilerplate which we
- 00:09:57 set up here all these files and folders
- 00:10:00 doesn't have to be expanded anymore
- 00:10:02 you'll only use or add some new reducers
- 00:10:05 and action files and components and
- 00:10:08 containers but you don't have to add
- 00:10:11 multiple new folders or write much more
- 00:10:14 code in any of these core root files
- 00:10:18 here and that's the advantage it's much
- 00:10:21 more manageable your state as clearly
- 00:10:23 manage and so is your app
