Directly Dispatch Actions into the Redux Store Before React Renders
In this lesson we take redux outside of the react lifecycle to improve the performance of our initial AJAX call. We also practice using the getState argument passed in to our thunks.
This lesson demonstrates that you can get a small performance gain by removing AJAX calls that feed into redux from the react/hooks lifecycle. In this video we see a 100ms reduction in the time it takes to initiate our AJAX call to load AJAX rates when we move it outside of useEffect and into our index.js file.
A thorough look at some of these patterns can be found here: https://redux.js.org/tutorials/essentials/part-5-async-logic
Documentation for all of the methods available on our redux store including dispatch and getState can be found here:
https://redux.js.org/api/store/#store-methods-1
Note: If you want to keep the logic inside of the useEffect and still get the performance benefit you kick off your API calls somewhere and store the generated promise somewhere and pick that up in your useEffect hook.
Instructor: [0:00] Here in exchangerate.js, go ahead and remove the useEffect hook, which is starting our API call. We'll get rid of that. We'll get rid of changeCurrencyCode. We'll get rid of useDispatch.
[0:12] Now, open up index.js. You'll notice here that we have access to our store even before the React render cycle starts. We can directly dispatch actions into our store by typing store.dispatch.
[0:20] Let's now import changeCurrencyCode and getCurrencyCode directly into this file. Import { changeCurrencyCode, getCurrencyCode } from './store/rates'. For this to work, we need to dispatch a thunk that we enabled with Redux Thunk.
[0:37] Type function getInitialRates(). Like any thunk, this will take dispatch as its first argument. We're also going to use the second argument, getState. Inside the function body, type const state = getState and const currencyCode = getCurrencyCode(state). Finally, dispatch, changeCurrencyCode, currencyCode.
[0:59] With this approach, we're able to dispatch our action to change a currency code and thereby calling our getExchangeRates API call well before React even start rendering the DOM.
[1:09] What might be the benefit of that? If you go into the Network tab over here in our web browser and refresh the page and you look at the timing, it looks like this particular request was queued around 99 milliseconds after the page started, pretty quickly after loading up the JavaScript file and requesting that AJAX call 99 milliseconds in.
[1:30] Let's compare that with the old approach which was relying on the useEffect hook. Let's see. I'll comment this out, get our dispatch back and we'll put that back in there.
[1:38] Let's comment out the new one that we made and refresh that page. You'll see that AJAX call has made around 200 milliseconds. When running this a few different times, I was able to see pretty consistently around a 30 to 50 milliseconds improvement by loading our AJAX call before React starts.
[1:57] One of the things we can do to clean this up a little bit is take this getInitialRates function. I'm just going to copy that out and stick this right back in our store right here, put it down here in a section called Thunks. We'll export getInitialRates and import it down here and I'll leave a little comment, "Kick start AJAX call for exchange rates."
[2:18] This approach isn't always helpful, but it's important to understand how Redux can live outside of React. It's also important to recognize that anytime you're using a thunk, you get the dispatch argument as well as getState which can be then passed into any selectors you have to pull anything out of the current state.