Directly Dispatch Actions into the Redux Store Before React Renders

InstructorJamund Ferguson

Share this video with your friends

Send Tweet

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.