2021 June 18thChaining multiple dispatchesreact-redux

Chaining multiple dispatches in react-redux

useEffect(() => {
  dispatch(initializeDashboard())
  dispatch(initializeCategoryGroup())
  dispatch(initializeBudget())
}, [dispatch])

This is what my code currently looked like. Was wondering if there was a way to streamline this.

I stumbled upon two options:

Batch them using the redux-batched-actions library
Use async

For my project, I decided to use async. This is how it looks like:

export const initializeDashboard = () => {
  return async (dispatch, getState) => {
    const user = await dashboardService.getUser(generateTokenConfig())
    const data = {
      user,
      currDate: moment().format("LL"),
    }

    await Promise.all([
      dispatch({
        type: "INIT_DASHBOARD",
        data,
      }),
      dispatch(initializeCategoryGroup()),
      dispatch(initializeBudget()),
    ])

    console.log("state after initialization", getState())
  }
}

Footer