How to clean up redux state with redux thunk when unmounting component before finishing fetch in useEffect?

user_8151873 0
Viewed 911

After some time working with react-redux and redux thunk I have realise about a behaviour, which isnt the best user experience.

I know that when you are working with react and you are fetching data in useEffect when the component is rendering and for any reason you go back or navigate somewhere else you need to clear the state with a function in the return (which will recreate the componentWillUnmount lifecycle)

This problem I am facing however occurs when working with redux thunk because the data fetch is with the actions creators. So to make my long story short I will show some code. The fetching action looks something like this:

export const fetchData = () => async (dispatch, getState) => {
 try {
    dispatch(fetchDataStart())
    const response = await fetch('https://jsonplaceholder.typicode.com/photos')
    dispatch(fetchDataSucess(data))
 } catch (error) {
     console.log(error)
 } 
}

Let's say that I call this action in my component useEffect like this:

useEffect(() => {

  const loadData = async () => {
    await dispatch(fetchData())
  }

  loadData()

  return () => dispatch(resetData())
},[ ])

As you can see I am dispatching a resetData action to clear the state when the component unmounts BUUUUT this is where the problem arrives. If before fetching the data the user navigates to another page, the resetData will be dispatched BUT as the fetch could not be finished the data will be stored after having been reseted. So when the user navigates back to that component it will blink (show only very quickly, maybe for a second) the old data before loading the new one. So is there any way to avoid this problem with redux thunk?

PD: I could block the navigation or the whole screen with a backdrop so the user wont navigate until the fetch is finished but i feel like that is kind of a workaround of the problem. However, let me know if you think that this would still be the best way.

Thank you.

redux-thunk react-redux reactjs
1 Answers

You can create an AbortController instance. That instance has a signal property, and we pass the signal as a fetch option. Then to cancel data fetching we call the AbortController's abort property to cancel all fetches that use that signal.

export const fetchData = () => async (dispatch) => {
 try {
    const controller = new AbortController();
    const { signal } = controller;        
    dispatch(fetchDataStart(controller)); // save it to state to call it later
    const response = await fetch('https://jsonplaceholder.typicode.com/photos', { signal });
   dispatch(fetchDataSucess(data));
 } catch (error) {
 console.log(error);
 } 
}

useEffect:

useEffect(() => {
   dispatch(fetchData());
   return () => dispatch(resetData()) // resetData will call controller.abort() that was saved in state
},[ ])
user_111243050
Related