- 00:00:01 welcome to number video about view
- 00:00:03 chairs and view X this video is a part
- 00:00:06 of a series but we started at a basic
- 00:00:09 project not using view X at all and we
- 00:00:11 improve this project by adding gathers
- 00:00:14 and mutations and the central story at
- 00:00:16 the beginning and now we've gone pretty
- 00:00:18 far but there is one big limitation of
- 00:00:21 this project right now or one possible
- 00:00:24 limitation should say if we had any
- 00:00:26 async code being executed as part of a
- 00:00:29 mutation that won't work
- 00:00:31 mutations always have to run
- 00:00:33 synchronously and it makes sense because
- 00:00:37 mutations are the methods directly
- 00:00:40 manipulating your store so it would be
- 00:00:42 kind of bad if they had some async
- 00:00:44 nature to them because that would mean
- 00:00:46 that when you commit a mutation it might
- 00:00:49 not run immediately so if you then get
- 00:00:52 the value thereafter it might not have
- 00:00:54 changed yet so therefore it makes sense
- 00:00:56 that mutations have to run synchronously
- 00:00:58 but what if you have let's say some HTTP
- 00:01:02 call which gets you a value which you
- 00:01:04 then want to use in your commit how
- 00:01:07 would you handle this because with
- 00:01:09 mutations as we use it right now that is
- 00:01:11 simply not possible or not possible
- 00:01:14 inside of your store at least so how
- 00:01:17 could you change this the answer is
- 00:01:19 actions and in this video we will learn
- 00:01:21 what actions are and how we use them and
- 00:01:24 how we can combine them with
- 00:01:26 asynchronous code let's start by setting
- 00:01:29 up an action I do does indeed store the
- 00:01:32 chess files in my store and I already
- 00:01:35 added the state gathers and mutations I
- 00:01:37 guess you can guess how I do add actions
- 00:01:40 I add a new property named actions and
- 00:01:44 this also is an object here I choose any
- 00:01:46 name for the action and I will name it
- 00:01:49 register and oftentimes you will have
- 00:01:51 the same name for the action and the
- 00:01:53 mutation because the action is kind of a
- 00:01:55 middleman running before you actually
- 00:01:57 commit the mutation here the action also
- 00:02:02 gets an argument and this argument
- 00:02:05 actually is the context of this action
- 00:02:08 now the name is of course up to you the
- 00:02:11 name you assigned to this argument but
- 00:02:12 will be
- 00:02:13 context and context is almost the same
- 00:02:16 as store but not completely the same
- 00:02:19 therefore it's a different name now on
- 00:02:22 this context we can simply run the
- 00:02:26 commit method because as I said it's
- 00:02:29 pretty much the same as the source store
- 00:02:31 but not entirely technically it's a
- 00:02:33 different object but it does have a
- 00:02:35 commitment and therefore here I can
- 00:02:37 commit the register method which excuse
- 00:02:41 me did register mutation now of course
- 00:02:44 like a mutation the action can also
- 00:02:47 receive a payload so either a payload
- 00:02:50 object like in the unregister approach
- 00:02:52 here or the value itself so use your ID
- 00:02:56 here and then I can also pass this as a
- 00:02:58 second argument to the commit method
- 00:03:01 because somehow I need to get that value
- 00:03:05 to the mutation
- 00:03:06 now with that action setup I can go to
- 00:03:09 my registration view file where I right
- 00:03:11 now directly commit the mutation and
- 00:03:14 here I can now instead call this store
- 00:03:17 dispatch
- 00:03:18 so like the mutation I'm not calling
- 00:03:22 actions and then executing the action
- 00:03:25 itself instead note we have to dispatch
- 00:03:27 method and this means I just batch the
- 00:03:30 action surprisingly here I do need to
- 00:03:34 pass the name of the action which is
- 00:03:36 register and then as a second argument I
- 00:03:40 payload user ID or alternatively like
- 00:03:43 with a mutation in the registrations dot
- 00:03:46 view file we could also dispatch it with
- 00:03:49 one single object where you have the
- 00:03:51 type as a set property and then any
- 00:03:55 other amount of properties you want to
- 00:03:57 use in this case though you need to make
- 00:03:59 sure that here you're getting the
- 00:04:01 payload in general and you access your
- 00:04:03 values like we do it here on the
- 00:04:05 unregistered mutation if I totally lost
- 00:04:08 you now have a look at the last video in
- 00:04:10 the series there I do explain this
- 00:04:12 approach of passing a payload back to
- 00:04:14 the action though we're dispatching it
- 00:04:17 and with that I'd say let's see this in
- 00:04:20 action well it looks good the app
- 00:04:22 behaves exactly like before so what did
- 00:04:25 we gain by
- 00:04:26 using action here well what we gained is
- 00:04:29 right now nothing but now we can execute
- 00:04:33 async code here because as I mentioned
- 00:04:36 in the beginning inside of a mutation so
- 00:04:38 inside of these methods here
- 00:04:40 you can't run asynchronous code
- 00:04:44 you always have to manipulate your state
- 00:04:47 in a synchronous manner but here in the
- 00:04:51 action before you actually commit it
- 00:04:53 you can run asynchronous code and yes of
- 00:04:56 course you would have been able to run
- 00:04:58 it simply in your component before
- 00:05:00 committing but then again you would have
- 00:05:02 that mixture of having some logic in
- 00:05:04 your components and some logic in your
- 00:05:06 store you really want to have all these
- 00:05:09 store and state related logic in your
- 00:05:10 store though therefore I run the action
- 00:05:13 here or decode now let's simulate some
- 00:05:16 async action by simply setting a timer
- 00:05:18 over let's say one second and after that
- 00:05:22 second is over then we will commit this
- 00:05:26 like that
- 00:05:27 now with this approach if we have a look
- 00:05:31 at an outlet register you see it took a
- 00:05:34 second before it actually happened
- 00:05:36 unregistering happens instantly though
- 00:05:37 because it didn't set a time earlier so
- 00:05:40 with that you see the difference here we
- 00:05:43 can and we are allowed to run
- 00:05:45 asynchronous code and mutations we are
- 00:05:48 not allowed to now one additional load
- 00:05:52 note since we are mostly only interested
- 00:05:55 in the commit method here you don't have
- 00:05:58 to get the full context object you can
- 00:06:01 also use an average or six feature
- 00:06:03 called deconstruction where you simply
- 00:06:06 use this syntax here curly braces and
- 00:06:10 then any name you choose to simply
- 00:06:13 extract and then the name of the
- 00:06:16 property you want to extract to directly
- 00:06:19 extract that property from the object
- 00:06:22 you're getting as an argument throwing
- 00:06:24 away the other properties that is
- 00:06:26 something you have to keep in mind but
- 00:06:27 if you don't need them that's okay and
- 00:06:29 with that you can leave out the context
- 00:06:32 thing and directly get the commit method
- 00:06:35 in this case so this is an action here
- 00:06:38 running some async code
- 00:06:40 now since we dispatch our action here in
- 00:06:44 the registration dot view file we have
- 00:06:47 the same behavior as before with dad we
- 00:06:50 finished our view X implementation using
- 00:06:53 the state in our central store using
- 00:06:56 gathers to get the state or get some
- 00:06:59 values depending on that state using
- 00:07:02 mutations to change the state and using
- 00:07:04 actions to trigger mutations possibly
- 00:07:07 after running some async code before
- 00:07:09 doing so these are all great things and
- 00:07:13 with that I hope you get a solid
- 00:07:14 understanding of how UX works why you
- 00:07:18 might want to use it and how you could
- 00:07:20 use it here I get a little graph showing
- 00:07:23 the whole flow of actions and all values
- 00:07:27 and it's basically just the thing we
- 00:07:29 built throughout the last videos but
- 00:07:31 with that and the videos that hopefully
- 00:07:33 is crystal clear how you can use view X
- 00:07:35 how state travels and how values travel
- 00:07:39 through your application and why it
- 00:07:40 might be beneficial now I got one more
- 00:07:43 video in this series and in this last
- 00:07:45 video I will show you some additional
- 00:07:48 tricks or additional things about UX see
- 00:07:52 you there bye
