Coding

ReactJS / Redux Tutorial – #5 Multiple Reducers

  • 00:00:00 so far we learned how redox works and
  • 00:00:04 how we use immutable objects and arrays
  • 00:00:08 so far we also only used one reducer but
  • 00:00:13 in bigger applications you'll typically
  • 00:00:16 have more than one reducer you might
  • 00:00:19 have reducers for different parts of
  • 00:00:21 your application so in our application
  • 00:00:25 our little Redux application here right
  • 00:00:28 now we're doing math related stuff so we
  • 00:00:31 might have a mauve reducer oops a muff
  • 00:00:35 reducer here now let's say I'll remove
  • 00:00:39 the user name here and I'll also take my
  • 00:00:42 initial state and simply pass directly
  • 00:00:45 here get rid of this constant so now I'm
  • 00:00:48 just changing the initialization I'm
  • 00:00:51 doing it here having my object here so
  • 00:00:54 let's say we not only have this Moff
  • 00:00:57 reducer but we also have another feature
  • 00:01:02 in our application where we do use a
  • 00:01:05 related stuff so we have the user
  • 00:01:08 reducer and this initial state would
  • 00:01:12 have let's say I have a name Max and an
  • 00:01:17 age 27 so that would just be another
  • 00:01:22 reducer with another initial state we of
  • 00:01:25 course can have multiple states in this
  • 00:01:26 application one per reducer to be
  • 00:01:29 precise because the reducer is the one
  • 00:01:32 responsible for handling the state and
  • 00:01:34 we can handle multiple states with
  • 00:01:36 multiple reducers so here we have two
  • 00:01:39 features some na for like stuff and some
  • 00:01:41 use related stuff and here we might have
  • 00:01:44 let's say a set name action and let's
  • 00:01:48 say a set H action and in the set name
  • 00:01:53 action your I of course also want to use
  • 00:01:56 the old state like it did before but
  • 00:01:59 then here I want to override the name
  • 00:02:01 and set it equal to action payload and
  • 00:02:04 and you set H case here I would do the
  • 00:02:07 same for the H set it equal to action
  • 00:02:11 payload so now I get a brand new
  • 00:02:13 user handling totally different actions
  • 00:02:17 now the problem is create store here
  • 00:02:21 oops
  • 00:02:22 expect one reducer I can't pass multiple
  • 00:02:27 reducers as arguments so I can't do math
  • 00:02:29 reducer and then use a reducer that that
  • 00:02:33 doesn't work that's not how it works
  • 00:02:35 I can only pass one reducer but
  • 00:02:38 thankfully Redux
  • 00:02:41 has multiple reducers in mind therefore
  • 00:02:44 I can import a new method here which is
  • 00:02:49 called combine reducers and you might
  • 00:02:52 already guess what it does it combines
  • 00:02:56 reducers awesome right
  • 00:02:58 so in the create store method I can now
  • 00:03:02 call combined reducers and this expects
  • 00:03:06 a JavaScript object which simply holds
  • 00:03:09 my reducers so math reducer and then
  • 00:03:15 muff reducer so we have to map them now
  • 00:03:19 if I use the same name for the property
  • 00:03:21 as the value es6 allows me to shorten
  • 00:03:24 this and just pass my free user and user
  • 00:03:27 reducer and es6 will automatically
  • 00:03:30 expand this to key value pairs where the
  • 00:03:33 key name matches the value name so the
  • 00:03:35 name of this variable constant here so
  • 00:03:41 with that I'm telling redux create a new
  • 00:03:45 store and the store should be aware that
  • 00:03:47 there are multiple reducers now that is
  • 00:03:52 all that is all if I save this and
  • 00:03:56 reload my application here you see now
  • 00:04:00 my store has this overall state which
  • 00:04:06 has then the Moff reducer and to use
  • 00:04:08 reducer and the Moff reducer is this
  • 00:04:11 sub-state if you want to call it like
  • 00:04:13 this the same state as you saw in the
  • 00:04:15 last video but now handle in a global
  • 00:04:18 state because in the end our store here
  • 00:04:21 holds one big application state it may
  • 00:04:25 only hold one
  • 00:04:26 not multiples but this big application
  • 00:04:30 state this Chava script object we
  • 00:04:33 created here may then have multiple kind
  • 00:04:35 of sub states did Margie state handled
  • 00:04:38 by the Moffatt user the state handled by
  • 00:04:41 the usual user and so on and that's what
  • 00:04:44 we're seeing here one big global state
  • 00:04:47 which then has these two sub states
  • 00:04:50 which have well their own state so with
  • 00:04:55 that in place I can add new methods also
  • 00:04:57 use the user reducer so we can call set
  • 00:05:02 H here and set this to 30 and if I save
  • 00:05:07 this and reload my application and go to
  • 00:05:10 the last state here you see now the ages
  • 00:05:12 30 if I have a look at the state
  • 00:05:15 previous to this so to the action
  • 00:05:18 dispatch before the last action you see
  • 00:05:21 the age is 27 because indeed I do change
  • 00:05:24 the age and very last action I dispatch
  • 00:05:26 here important thing here as you might
  • 00:05:30 already have recognized the names for
  • 00:05:33 reactions here may only u be used once
  • 00:05:37 because I'm dispatching them on my store
  • 00:05:40 and not on the reducers so here if I
  • 00:05:46 were to have a add action in my user
  • 00:05:50 reducer tube then this would be kind of
  • 00:05:53 bad because I have an ADD action here
  • 00:05:56 too so we have to make sure that we use
  • 00:06:01 unique actions here and this is how easy
  • 00:06:04 you use multiple reducers that's all
  • 00:06:06 that's to it important thing to keep in
  • 00:06:09 mind one global state this chava script
  • 00:06:12 object which may then have sub states