How to dispatch an action just if another action was correctly dispatched ? Using redux thunk (react)

Question

I am struggling with finding the way of how to best dispatch multiple actions with redux thunk. Firstly, i want to keep all my thunks isolated and not mix them, because it of course will let me use them anywhere (in one view i could dispatch fetchData and then show a message saying "the data was successfully fetched" and in another view after fetching the Data just fetching something else or In some cases i want to execute code just if my thunk was successfully dispatched). For example lets say i have the next thunk:

export const fetchData = () => async (dispatch, getState) => {
  dispatch(fetchDataStart())
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/photos')
    const data = await response.json()
    dispatch(fetchDataSuccess(data))
    // should i dispatch actions here and create more thunks like this one for differents 
    // situations 
  } catch (error) {
    dispatch(fetchDataFailed(error))
    throw error // is this throw error correct to stop the flow of the code
  }
}

and in my component I dispatch that action to fetch the data I need:

useEffect(() => {
    // should i make this function async and await for the first dispatch and then dispatch 
    // another function
    const loadUsers = () => {
       dispatch(fetchData())
       // await dispatch(fetchData())
       // dispatch(nextAction())
    }
    loadUsers()
  },[ ])

What is the correct approach to dispatch another action depending on the first fetch?

Should i throw an error in the thunks to avoid other actions to be dispatched if the fetch is not successful?

Should I dispatch the next action in the component or just create more and more thunks for every different situation depending on what i want to do after one action? (this could make my actions files bigger )

Thank you in advance for your help

CodeOfLife CodeOfLife · Accepted Answer · 2021-01-25T18:43:35

Let's address your questions one by one.[The answer is based on my experience how I do it in my project].

1)What is the correct approach to dispatch another action depending on the first fetch? The correct approach would be to dispatch the actions from the component. For example(pseudo code),

function demo(props){
dispatch(fetchDataStart());
if(props.data==="yes")
dispatch(nextAction())
}

The props will be data coming from the redux store, so once the store gets updated it will fire next action as the state has changed.

Should i throw an error in the thunks to avoid other actions to be dispatched if the fetch is not successful? yes the error should be stored in the redux store (you can use a reducer).

3)Should I dispatch the next action in the component or just create more and more thunks for every different situation depending on what i want to do after one action? (this could make my actions files bigger ) =>we don't create our middleware based on actions. we create middleware based on our component .So if we have data component then we might have only one middleware and we can have multiple actions in our action.js file.

This is the approach we follow in our project and it really helps. we keeps everything in a folder store and under it we have subfolders like actions,reducers,selectors,middleware

How to dispatch an action just if another action was correctly dispatched ? Using redux thunk (react)

1 Answers