Async in MobX

hey everyone welcome to another video we're gonna be covering today how to do a sync in mob X this was a question posed to me by someone on my other intro to mob X videos and it was basically how do you do a sync in mob X so that's what we're gonna cover and to be honest I was doing it wrong before I started researching into this it's pretty easy to do but there's a few little tricks to know if you've ever done redux before you've you had to use thunk and it's it's a bit of a process so today we're gonna see how mob X handles that same sort of thing so if we look at our app what we're doing here is just simply showing some JSON that we fetched from from an endpoint let's take a look at the code so here we have our app component and what we're doing is when the component did mount we are going to our store and we're telling it to load weather for Toronto Ontario Canada and then down here were JSON prettying just to make it look nice what weather data is loaded when we load it if you'll notice if you've seen other videos are done mob X before normally you do inject up here with decorators so you'd inject a weather store and then you'd say that this is an observer so that it updates when when changes are made to the data in the store in this video I'm going to try and do it without any sort of decorators because we're actually using mob x4 and in mob x4 there's some new functionality to make it really easy to decorate your different functions your actions your computes and whatnot without needing the babel support for decorators so that's why down here we're injecting the weather store in that return that returns as a function that we can then call and we can pass the observer function and our app component so we end up in the same place but we don't need to sort of either eject from create react app or use the different things like the abilities to add in different babel plugins without injecting and whatnot it's a bit of an easier way and it's not that much more work to do it this way then adding decorators up here so let's get started component did mount we call the load weather function so we come into our store and we've got our class here like normal and let me just point out here is where you'd normally sort of have whether data is an observable property and load whether is an action like that you'll notice I don't have that because in mob x4 there's this new decorate function that it comes with so you can pass it your store and then an object and then you pass all of your different properties or your properties or your actions or whatnot here and it sort of decorates it all after the fact we're just going to the version quickly so I'm actually using a beta 2 by the time this video comes out or whenever you see it it might be for as launched by now but I don't think the API will be changing at all so you'll notice I'm not ejected at all this is just standard crate react up so let's say we want to make my load weather function in action you would just say load weather is going to be in action like that so if we look in here load whether it takes a city which is the Toronto Ontario and then we use fetch to go hit this little demo API have setup and we pass the city when we get a response we'll convert it to JSON and then after we've got that data we'll simply put it we'll set it weather data which is our observable property here to be what comes back from the API so if we refresh the page it loads pretty quickly and we have our weather being displayed here now you may think everything's fine but we have one issue and the issue is that when you use actions in mob X what you're really supposed to do is any time you're changing your observable data it's supposed to be done directly in the function the action function but what you'll notice here is that we're actually changing our observable data not in the action function itself but in the then promise callback sort of thing that happens here so the data is being updated you could say outside of this action directly and in mob x3 there was something you could do forget what was called actually I'll link it in the notes well here we go so in mob x3 you would use this function use strict to and it would sort of monitor things for you so that if you did update data outside of an action it would give you a big error in mob x4 you use this new configure function so I've imported it here and we're gonna call it and we're gonna tell it to enforce our actions for us and what this will do in a sec you'll see all right so we've essentially turned strict mode on and it's telling us that changing and observed observable values outside of actions is not allowed please wrap the code in in action so you'll notice here well this is an action we've we've said here it's an action but it's giving us an error and that's as I mentioned before it's because it's actually being done in this callback function here when the promise is resolved rather than in the action directly so what we can do to fix this is we can just simply create a new action here called set weather which will take our data and it will say that the weather data is equal to the data so instead of setting it directly here we can call set weather and pass our data to it so what we have done is we're changing the data here now not in load weather so this doesn't really need to be in action because nothing is being changed in it what we need is to make set weather our action so we do that and now things are loading fine without any sort of errors at all and same sort of thing like if you had this wrapped in a try-catch so that you could catch any errors that might come back from me API your catch code should also be inside of probably a separate function that would be like handle set handle fetch weather error or something like that but no error handling in this demo alright so we solved it one way by simply moving where we're setting the data into its own little function which we're gonna make an act we're going to look at two other ways you can do this so we are going to basically copy this and we're gonna call this load whether in line and we will want to make it ah you know what we don't even need to make it at action so load whether in line and what we want to do is really what we want to do is when we get the data back we want to do it set the value right here but we can't because it's not being done directly in the action so what you can do is you can import this function called run in action and it sort of allows you to create a little inline action anywhere inside of your functions so you can say run in action here and you pass it in arrow function and then inside of this little arrow function it's going to be run inside of an action so we can say this dot whether data equals data and we'll switch up our function out in the app to use that one instead so we refresh and it's all working correctly no errors so the first approach is to sort of move your setting of the observable data outside of call a function which does the setting directly rather than doing it in this callback up here second approach is to use the run in action function to allow you to inline action code that would otherwise give you a strict violation so how can you do this instead of doing the then the then but switching it to an async await I'll show you that here we'll call this load weather async all right so what we get back first is our response so we'll say Const response equals a weight that that allows us to get rid of that call and then we'll say Const data equals a weight response JSON so now we've got our data so that allows us to get rid of this code here but then we still need to run it inside of an action here in line like this and the reason is because even though it sort of reads sort of one thing then this then this and there doesn't look like there's any callbacks happening what a single weight is doing in the background is it's basically switching it run code that's like this but it allows us to write it in a nicer way without needing the dot thenns everywhere so we still need our run in action so we'll just make sure it works by calling our load weather async function instead and it works fine without any airs let me just double check that I'm not alright we're good so far so these are essentially the same thing it's just switching it to use async/await instead of the dot then our promis resolution so let's take a look at a third way now and a third way is to use this new functionality called flow and we're going to be using flow along with generators and yield which is a little bit new to me but we'll walk through it flow in version 3 of mob X didn't actually come from the core mob X package it came from this package called mob X utils and it used to be called a sink action so if you're in mob x3 you're gonna import a sink action from mob X utils if you're in mob x4 you're going to import flow from the core mob X package all right so we're going to call this load weather generator version and you from what I have found it's you can't really use this arrow function approach with generators you're gonna have to switch back to the the old function approach so our function takes a city and we'll just copy this one because it's the most similar down into here and then we'll we need to once we get our data we can set the weather like this all right so we're missing two things if we wanted a sink away you'd have to say a sink here but we're actually not going to be doing that we're going to be converting it into a generator function and you do that by adding this star here and now that it's a generator function we're actually going to be yielding instead of awaiting the data so what a generator does it essentially makes your function iterable so it can whoever is calling this function can basically loop over and every time it receives a yield that basically yields control back to the calling function and it can do what it wants so we're yielding here back to whoever is calling this function and by doing that it allows us to use this new flow function which we're gonna decorate down here so we're gonna say load weather generator and that's going to be decorated by the flow function so what's calling this function here is going to be the flow because that is the thing that's wrapping this function here and what flow will do is every time we yield control to our parent the the caller in this case flow it's essentially gonna do this sort of thing it's gonna wrap the code that is run in it like a run in action and then that will allow us to to have this code that sort of reads more a little bit more like async await but we don't have to have this run in action every time we want to modify our observable data so if this works we can call our load weather generator which again is a function that is a generator every time you you have a synchronous code so every time you would do a weight you're going to use yield instead and that allows the flow function which is decorating this one to take control for a second and basically wrap your code in action so that it all works correctly even in strict mode so we're going to call our load weather generator function and it again works without any errors great okay so just to oh I should mention there is one other approach let me just mob X async if I go to the actual documentation into writing asynchronous actions so they sort of cover why you can't do it and they show the different approaches that I covered as well so run an action which we did run an action with async await so if you want to do the async await proach and you don't want to use this generators approach below but you find it really annoying every time you've you want to have your code running in action using this run in action function there's a babel plugin you can use called babel plug-in mob x deep action and it essentially allows you to write code that looks just like async await so like this code here without needing to wrap things in run in action the babel plugin does that for you but i chose not to use that here because i wanted to use a straight-up create react app where i havn't ejected or done anything with the babel packages this is as sort of vanilla as you can come and if i wanted to add this babel plugin i'd have to either reject or use another approach of being able to modify the web pack babel plugins without ejecting so i think this is a little bit too good compromise these approaches here and just to go over them again we've got our weather store and here we've got our most basic load weather function and instead of setting our data right here we simply call another function with the data and it can set the observable property and the reason this works again is because we have decorated that function sorry right here as an action our second approach was to convert this and to do it in line but to do that in line without with having our code run correctly in an action we had to use this run in action function so it adds a little bit more boilerplate but it allows us to have one single function instead of two here we use the same approach but we used async/await instead of the normal than then with fetch so we awaited our response we converted the response to JSON now we've got our data so to set our data into the observable property we need to wrap that in a run in action plot the last approach was the generator approach where we used a generator function instead and every time there would have been a wait we yield and we're yielding control to the the calling function which in this case is flow because we've decorated this load weather generator with the flow decorator down here and that allows us to run everything correctly inside of strict mode which in mob x4 you use the configure function for and you tell it that you want to enforce your actions and I would always recommend having this on by default because it will help you write mob X code more correctly where everything every time you're modifying observable data it is only done within an action thank you very much hope you enjoyed this video and if you're interested subscribe to this YouTube channel because I'm going to be trying to put out videos on react mob acts and sort of all sorts of related topics hopefully once a week all right have a good day everyone ticker bike

Channel: Leigh Halliday

Views: 17,985

Keywords: react, mobx, javascript, es6, async, redux

Id: r2rIen5pEbQ

Length: 17min 55sec (1075 seconds)

Published: Sat Mar 10 2018