[React] Directly Dispatch Actions into the Redux Store Before React Renders

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.

Syntax:

const store = configureStore({ reducer: counterReducer })

const exampleThunkFunction = (dispatch, getState) => {
  const stateBefore = getState()
  dispatch(increment())
}

store.dispatch(exampleThunkFunction)

 

Dispatch async event for initial state can be done outside of component. Can do it in index.js file before rendering anything.