useEffect hook of react vs redux thunk middleware in redux

Question

use effect hook is used to perform the side effects like network requests in react.

redux-thunk middleware is also used to perform the side effects like network requests in react.

I'm pretty confused, is there any difference in their real application, or is it just a matter of choice.

Answer 1

Redux thunk is if you are using redux and are doing something asynchronously. E.g such as writing to a database.

if you are just using functional components in React and you want to update the ui then you would use useEffect to check for the change. If you are using class based components then there is a built in method componentDidMount. Built in as in you don't have to import it in along with React. Which you need to do for useEffect.

Here is the page for hooks, that talks about how it is used. https://reactjs.org/docs/hooks-effect.html

Here is the page for thunks https://redux.js.org/usage/writing-logic-thunks

Answer 2

The purpose of thunk is not to perform side effects by definition.

In Redux world, the actions must be plain objects with a required key type. An example:

const increaseAction = { type: "INCREASE" };

If you want to create a function that returns an action, this function should also return an action object but nothing else. Otherwise you cannot dispatch the action creator function itself.

// Create an action creator
const increase = () => {
  return { type: "INCREASE" };
}
// Now you can dispatch the result of this function
dispatch(increase());

However, when dealing with asynchronous network requests, you probably want to dispatch multiple actions that updates your state accordingly based on the current state of your network request.

// When starting network request
dispatch({ type: "FETCH_START" })

// When network request is successful
dispatch({ type: "FETCH_SUCCESS" })

// When network request fails
dispatch({ type: "FETCH_ERROR" })

That's why action creator functions that deals with network requests or asynchronous operations return another function that takes dispatch as its parameter. This return function is handled by thunk middleware. Now we can use the dispatch function from the parameter to dispatch our actions.

const fetchData = () => async (dispatch) => {
  dispatch({ type: "FETCH_START" });
  try {
    const data = await fetch("http://somedata.com/something").then(res => res.json());
    dispatch({ type: "FETCH_SUCCESS", payload: data });
  } catch {
    dispatch({ type: "FETCH_ERROR" });
  }
}

If you realized, we did not return anything inside fetchData. Instead, we used the dispatch parameter from the function that is returned by fetchData. When you dispatch(fetchData()), thunk transforms your action creator functions into plain objects; wait for the network requests to be resolved or rejected, then dispatch the appropriate action based on the result of your network request.

Now where does useEffect fall into this equation?

useEffect is the React hook that mimics the React lifecycle methods from class components. If you want to make a network request, or any asynchronous operation, you can do it inside useEffect. Following the Redux example above, you would call dispatch(fetchData()) inside useEffect.