Coding

ReactJS / Redux Tutorial – #3 Using Redux

  • 00:00:00 to start diving into redux I will leave
  • 00:00:04 out react.js for now so redox works
  • 00:00:07 standalone it doesn't meet react chest
  • 00:00:09 and actually you can use read acts with
  • 00:00:12 other front-end frameworks of your
  • 00:00:14 choice you with playing JavaScript even
  • 00:00:16 so I'll leave out react chess for now so
  • 00:00:19 that you understand how redox works
  • 00:00:21 before I then in one of the next videos
  • 00:00:23 show you how to wire up react chess and
  • 00:00:26 read acts so in the next is in this
  • 00:00:31 application where I of course use react
  • 00:00:33 chairs I will comment out everything
  • 00:00:36 here I'll need it again later and then
  • 00:00:38 down here I'll work with redux I already
  • 00:00:42 get my web pack server running and in
  • 00:00:45 order to work with redux I need to add
  • 00:00:48 it so I will install it and with NPM
  • 00:00:51 install and well Redux here and I'll add
  • 00:00:55 the safe flag to add it to my
  • 00:00:57 dependencies so this will pull down
  • 00:01:00 Redux and install it should finish
  • 00:01:04 without an error looks fine and then I
  • 00:01:06 can use it again I will come back to the
  • 00:01:10 reactions part in one of the next videos
  • 00:01:12 so in order to use redux the first step
  • 00:01:16 is to create a store and I import the
  • 00:01:20 effort if you create such a store from
  • 00:01:23 the newly added Redux package so the one
  • 00:01:26 we just installed the method I need is
  • 00:01:29 called well create store and as you
  • 00:01:32 might guess this method allows us to
  • 00:01:34 well create a store so I will create a
  • 00:01:37 new store in a constant here call the
  • 00:01:40 create store method and this method
  • 00:01:42 takes two arguments I'll start with the
  • 00:01:46 second argument first which is the
  • 00:01:48 initial application state now this could
  • 00:01:50 be a JavaScript object could be an array
  • 00:01:53 but here I'll keep it real simple and
  • 00:01:56 just pass an integer just a number one
  • 00:01:58 choose any number you like now what's
  • 00:02:01 the first argument the first argument is
  • 00:02:04 the reducer I wanna use now as said I
  • 00:02:08 can use multiple reducers and I will
  • 00:02:09 come back to multiple reducers in one of
  • 00:02:11 the next videos for now let's say only
  • 00:02:13 use
  • 00:02:14 one reducer remember reducer is the part
  • 00:02:17 which takes your actions you dispatch
  • 00:02:19 anywhere in your application and then
  • 00:02:22 does something with that action so it
  • 00:02:24 changes your state I'll create a new
  • 00:02:27 user here name is up to you but I'll
  • 00:02:29 name it reducer it's a constant and it's
  • 00:02:33 basically just a method I'll use the fat
  • 00:02:37 arrow notation here like this to create
  • 00:02:40 this method and it takes two arguments
  • 00:02:43 these arguments will be passed
  • 00:02:45 automatically by real axe it takes a
  • 00:02:49 state and it takes an action so here I
  • 00:02:53 then can do something upon the action
  • 00:02:57 now what you typically do in a reducer
  • 00:03:00 is you want to determine which action
  • 00:03:03 occurred because one reducer typically
  • 00:03:06 handles multiple actions so a switch
  • 00:03:08 statement is a suitable thing here to
  • 00:03:11 check the type of the action so I check
  • 00:03:13 action dot type so in a switch statement
  • 00:03:16 I then want to handle a case let's say
  • 00:03:19 add we want to add something to our
  • 00:03:22 number remember our state is just a
  • 00:03:24 number so the add case here I'll add the
  • 00:03:29 logic soon for now I'll break and then
  • 00:03:32 these subtract case now I'm writing this
  • 00:03:36 all upper case you don't have to but
  • 00:03:38 it's a convention you typically use to
  • 00:03:40 name your action types or to give them
  • 00:03:43 uppercase names so you might want to
  • 00:03:47 adopt this right now do you reducer
  • 00:03:50 that's nothing it just checks which
  • 00:03:52 action occurred but then it does nothing
  • 00:03:54 with that action it doesn't change our
  • 00:03:57 state an important thing is our reducer
  • 00:04:00 always has to return a state so here I'm
  • 00:04:03 just returning the unchanged state we
  • 00:04:06 have to return a state because this is
  • 00:04:09 the new state our application will use
  • 00:04:13 from this point on because as a next
  • 00:04:16 step I will pass this reducer method to
  • 00:04:19 the create store method here now this
  • 00:04:22 sets up the very basics of our redux
  • 00:04:24 application where our application
  • 00:04:26 using Redux we have a store which we
  • 00:04:29 created here and this store knows this
  • 00:04:32 one reducer and it knows hey this
  • 00:04:34 reducer will give me the new state
  • 00:04:37 therefore the reducer has to return a
  • 00:04:40 state otherwise we will get errors
  • 00:04:43 because our store doesn't receive the
  • 00:04:45 new state it expects it only has the
  • 00:04:47 initial state the one but it doesn't get
  • 00:04:49 new states therefore reducer has
  • 00:04:51 returned States again as of now it only
  • 00:04:55 returns the initial State or the state
  • 00:04:57 we pass to the reducer talking about
  • 00:05:00 passing something to the reducer let's
  • 00:05:04 do this I want you trigger such action I
  • 00:05:09 was talking about dispatching actions in
  • 00:05:12 the previous videos
  • 00:05:13 these actions for now are dispatched on
  • 00:05:16 the store which means hey store here's a
  • 00:05:20 new action and a store will then sent
  • 00:05:22 the action to the reducer because it
  • 00:05:24 knows the reducer is responsible for
  • 00:05:26 handling the action the store does not
  • 00:05:29 handle it the store only knows who's
  • 00:05:31 handling it the reducer so we dispatch a
  • 00:05:35 new action here and dispatching an
  • 00:05:38 action means calling the dispatch method
  • 00:05:40 that's a method the redux package ships
  • 00:05:43 with and this dispatch method here
  • 00:05:46 expects a JavaScript object now that is
  • 00:05:50 the action we send and here is the point
  • 00:05:53 where I was talking about earlier I am
  • 00:05:55 setting a type property and then I'll
  • 00:05:58 set the type of D action I want to
  • 00:06:01 dispatch now I can use any string to
  • 00:06:05 give this action a name but of course it
  • 00:06:07 makes sense to use a string I'm already
  • 00:06:09 handling here so if I were to choose
  • 00:06:11 multiply here well then we wouldn't find
  • 00:06:14 it in the switch statement and nothing
  • 00:06:16 would happen so let's use add here and
  • 00:06:19 this means with add being triggered we
  • 00:06:24 will land here in this case block of
  • 00:06:26 course no code is run year except for
  • 00:06:29 the break statement which gets us gets
  • 00:06:31 us out of the switch statement here but
  • 00:06:33 we will land here and if we add code
  • 00:06:35 then the add code here will be executed
  • 00:06:39 so that's the type but we also need
  • 00:06:41 something else we need a value or a
  • 00:06:45 payload Tudors action now here you may
  • 00:06:49 choose a name of your choice but
  • 00:06:53 typically you will use payload and as
  • 00:06:57 you will see in later videos if you add
  • 00:07:00 our packages which enhance the redox
  • 00:07:03 functionality let's say those packages
  • 00:07:06 will oftentimes expect that you use
  • 00:07:09 payload here as name for your values so
  • 00:07:14 using an our name might then lead to
  • 00:07:16 problems so I'll stick to payload and
  • 00:07:19 that's the payload of the action
  • 00:07:22 typically and you will teach us in later
  • 00:07:24 videos of course in your redox app for
  • 00:07:27 example if you change to username the
  • 00:07:28 payload would be the new username now
  • 00:07:31 here it is simply the number I want to
  • 00:07:33 add let's say 10 so now we're
  • 00:07:36 dispatching ad action with a payload of
  • 00:07:39 10 and of course this won't trigger
  • 00:07:42 anything as of now so in order to
  • 00:07:46 trigger anything here let's take our
  • 00:07:49 state here and set it equal to the old
  • 00:07:54 state plus action dot value now we're
  • 00:08:00 changing the state we get our state pass
  • 00:08:02 to the reducer and then we set the new
  • 00:08:05 state to the old State Plus this action
  • 00:08:09 value and then we return the state here
  • 00:08:12 so in order to see something and then do
  • 00:08:17 one other thing you typically don't do
  • 00:08:19 in your react.js application because
  • 00:08:22 there you will see something in well on
  • 00:08:25 your webpage of course but since we
  • 00:08:28 don't use react here I will subscribe to
  • 00:08:30 my school story here which means
  • 00:08:33 whenever the stores updated fire this
  • 00:08:36 callback I pass here
  • 00:08:37 the callback I pass as a fat arrow
  • 00:08:40 function so this function gets executed
  • 00:08:42 whenever the store is updated and here I
  • 00:08:46 simply want to log store update it and
  • 00:08:51 then let's
  • 00:08:53 print story get state which is a
  • 00:08:56 built-in whoops which is a built-in
  • 00:08:58 function which gives us the news state
  • 00:09:01 so with all of that in place if I save
  • 00:09:05 this and go back to my application here
  • 00:09:07 and I open up the console reload the
  • 00:09:11 page we see store updated not a number
  • 00:09:15 so something is going wrong here what
  • 00:09:18 could that be
  • 00:09:18 it's of course dead here I should use
  • 00:09:21 payload and not this so now you see
  • 00:09:28 store updated 11 so value of course was
  • 00:09:32 wrong because I just explained that we
  • 00:09:34 should use payload here and then I did
  • 00:09:36 it wrong so payload is the thing to use
  • 00:09:38 here with that you see we get store
  • 00:09:41 updated 11 because the initial store is
  • 00:09:44 1 as you see here the initial State
  • 00:09:46 excuse me the initial state in the store
  • 00:09:48 is a 1 and then we dispatch this add
  • 00:09:51 method where add action here which adds
  • 00:09:54 10 so if I change this to 100 here well
  • 00:09:59 then you see a 101 because initial state
  • 00:10:01 is 1 we add 100 we get 101 easy huh so
  • 00:10:06 let's dispatch another method we could
  • 00:10:09 dispatch a number add method here for
  • 00:10:11 example at 22 and then we could dispatch
  • 00:10:16 subtract method so let's say we want to
  • 00:10:20 subtract 80 then now of course I have to
  • 00:10:23 implement you subtract method here so
  • 00:10:26 stage should then be state – action dot
  • 00:10:28 payload and if I save this and let me
  • 00:10:33 reload this UC store updated 101 because
  • 00:10:38 we add 100 then you see store updated
  • 00:10:43 123 because we add 22 to 101 and then
  • 00:10:48 you see store update with 43 because we
  • 00:10:51 deduct 80 from 123 and that is how Redux
  • 00:10:57 works in a nutshell we create a store we
  • 00:11:02 tell the store who is responsible for
  • 00:11:04 changing the state we
  • 00:11:07 and dispatching action this dispatched
  • 00:11:11 action is handled by the reducer we
  • 00:11:15 execute some code depending on which
  • 00:11:18 action gets executed we return in a new
  • 00:11:21 state the new state is stored in the
  • 00:11:23 store and well we're informed that the
  • 00:11:26 store changed and of course later this
  • 00:11:30 part here the subscription is handled by
  • 00:11:32 react.js so these are the very basics
  • 00:11:37 and with that let's go on to the next
  • 00:11:39 video where we will have a look at using
  • 00:11:42 more complicated types than numbers as a
  • 00:11:45 state specifically objects and arrays
  • 00:11:48 which is something you'll typically do
  • 00:11:49 in your application