Redux Async Actions - Redux Tutorial #6

Key Takeaways

okay we are almost ready to integrate Redux into our react application and the last thing we got to do is figure out how to handle our async actions and Redux actually makes that really easy because with Redux tied into react react is only ever a representation a view representation of the state of the store so as the store changes the view changes but the view never changes unless the store changes that's kind of the biggest fundamental difference in Redux is react is simply a view layer only you move absolutely all of the representation out of the components and into the store so basically you never ever ever use State again you're always going to use props that come from the store and async is really where you kind of start to see how that makes sense how it plays out and it's a little bit different mentally at first but then once you get it it's really really simple so first of all let's get rid of this uh store subscribe and let's import a logger I've instored Redux I've installed Redux logger and then their way of doing it is you actually have to do logger and then actually run that as a function so now we should start seeing these beautiful logs excellent so we get our previous state the action that was fired and the next state Redux logger is very nice um and then we want to go ahead and instead of dispatching an object that contains a type and maybe a payload we actually want to dispatch a function with that receives one argument and that argument will be the dispatcher we'll actually call it dispatch it'll be the dispatch function and then inside of this function we can actually call dispatch and we can actually dispatch an event here we can do something async and then we can dispatch something else so that'll basically be how we handle asynchronous actions as far as Redux and react is concerned it's just a handful of multiple synchronous actions and so basically there's a thunk middleware that allows us to do this there we go so we're just going to import Redux thunk add that as middleware and we're good to go so then we can dispatch stuff of course these are all going to be empty objects because they don't have types you can see I got a nice little error message there so we'll just go type of Foo for now and then type of bar and there you go so now multiple actions are happening with One Singular action and that's how we're going to handle async actions so let's go and import a xhr request which axios is kind of my favorite one these days no need to bring in jQuery here if you're working on the clients uh react is awesome and that You' never need jQuery again so then we can actually dispatch uh let's go ah A dispatch fetch users let's say we're doing a fetch users AC ction we'll dispatch a fetch user start right away with absolutely no payload that way the UI can show a loading bar or something like that or it can reference that you've actually started fetching those users we're going to go ahead and get something I'm going to use that free restful API that I put up a while back rest. Learn code. Academy and I already posted a couple users to that de Stern users this is actually a really fun way to just mock out data instantly you can start posting to any username uh and start getting anything it'll basically create a collection on demand so if you do a post to I don't know John Bob users then it's going to create your users collection right away and post whatever object you're doing in there the data just resets nightly you can see more on rest. learn code academy but it's awesome for rapid prototyping uh so we're just going to get that then that'll give us a response and we're just going to run that and we'll dispatch something else let's bring this up here so when our response is received we're going to go ahead and dispatch type fetch users received actually this would probably called receive users and then the payload will be response.data is the format that axios uses for that and then if there's an error we can also catch that fetch users error and the payload will just be the error object so there we go we have potentially three actions that could go here we're always going to fire fetch user start when that data is received let's say half a second quarter second later then we're going to fire off a receive users with a payload of that data and if there's an error we're going to dispatch fetch users error so then all we have to do is go up to our reducer and add those different states so I can switch based off of make that a little cleaner if our case is fetch users start we're going to run that block our case is fet users error we're g to run that block oops and if our case is receive users and we're going to run that block add my brakes and we should be good to go so there we go we have a fetch user start you can see a little bit later we've got our receip reive users so all we have to do is actually have these do something so right now my default state is blank it's an empty object let's go ahead and add an actual initial State here and let's say fetching is going to be false these are going to be some nice pieces of data that our UI can use fetching false so if fetching switches to true then the UI can automatically when it renders show a loader um and then fetched false we haven't fetched anything yet so we will not show say the users array with an empty amount of users in it um and let's go users is empty right now and then error is null no error so we won't don't have to worry about showing that at all so that's our default state so then our state can actually use this so now our initial state will actually have that information in it you can see there we go boom boom boom initial States populated so if the users start then we're just going to return we going to return State and we're going to change fetching to true and then if there's an error we're going to return the exact State fetching is false we're done fetching and then we're going to add the action payload in is the error so the exact same state we don't care about any of the rest of the state but we are going to change fetching to false and we are going to add the error in there from the action payload and then lastly receive users we're going to pull in the state the fetching is false fetched is true and users is action payload and at this point it probably makes sense to actually break that into multiple lines just to keep things clean there we go so now everything should work and our logger should show us a beautiful amount of so at first you're fetching false fetched false no users same as true and then that's when it starts but then you can see that it changes it to fetching true fetched false no users and then we received our users so now we have fetching false fetched is true and we have our two users in here which are came from that API and we have an object of Will and we have an object to my wife Laura so let's go ahead and make this error there we go whoops had a typo in that URL there you can see now it fired fetch users start there's the axios error and then the fetch users error went off and fired so now our next state is eror fetched fetching and still no users so that's the way you do it with thunks with by dispatching a single function that receives a dispatch first argument you can only ever give it one argument that's what a thunk is you can look up more on thunks that's a little outside the scope of this video and then if you do a lot of promises which this returns a promise you can clean that up a little bit more by doing Redux promise middleware so let's import promise there we go promise is pulled in and then we can actually do promise instead of thunk or promise in addition to thunk there you go promise also has to be run as a function and without you dispatch it a little differently you'd still dispatch a standard flux object uh so you dispatch that and you give it a type which type doesn't really matter because we're not doing anything yet so I'll just say type of Fu and then you actually return your promise so here's my promise as the payload and so that middleware that promise middleware where was that right there promis middleware will notice that you dispatched a payload that is a promise type and it'll automatically send through some default messages some default dispatches for you so let me go ahead and make this work again there we go so that's going to work let me clean this code up here and so you'll notice that automatically it sends off a foo pending and so Foo is going to be the type so I guess I do want a fetch users so automatically it fires fetch users pending and then it's going to fire fetch users fulfilled whenever that's finished and then should there be an error it will do rejected fetch users pending fetch users rejected so it is cleaner if you do a lot of promises if all your async is promises you're not really using es6 generators um then that's really clean you can see that cleans it up just fine and then you just up here you go fetch users pending fetch users rejected and then fetch users what was that fulfilled there's probably two L's in fulfill no there's just one L fulfilled ah I was homeschooled let's make that error again and you can see that rejected picks up excellent so there you go that is how you handle asynchronous actions with Redux you just change the way you dispatch them so that's about all you need to know in the next videos we can actually tie this into our react application and make the react application simp simply reflect the state of the store