How can I handle side effects in Redux?

How can I handle side effects in Redux?

You can handle side effects in Redux using middleware like Redux Thunk or Redux Saga. Would you like to know more about either?

What's the difference between Redux Thunk and Redux Saga?

Redux Thunk is simpler and allows you to write action creators that return a function instead of an action. Redux Saga, on the other hand, uses generator functions to handle side effects more elegantly.

Can you give me an example of using Redux Thunk?

Sure! With Redux Thunk, you can create an action that fetches data from an API and dispatches actions based on the result. Would you like to see a code example?

Yes, please show me a code example!

Here's a simple example:

const fetchData = () => {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });
    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
    } catch (error) {
      dispatch({ type: 'FETCH_DATA_FAILURE', error });
    }
  };
};