How do I use Redux Thunk in my React application?

How do I use Redux Thunk in my React application?

To use Redux Thunk, first install it via npm. Then, apply it as middleware when creating your Redux store.

Can you show me a simple example of an async action using Redux Thunk?

Sure! Here's a basic example:

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

What do I need to do in my reducer to handle these actions?

In your reducer, you can handle the actions like this:

const initialState = { loading: false, data: null, error: null };

const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_START':
      return { ...state, loading: true };
    case 'FETCH_SUCCESS':
      return { loading: false, data: action.payload, error: null };
    case 'FETCH_ERROR':
      return { loading: false, data: null, error: action.error };
    default:
      return state;
  }
};

Thanks! Is there anything else I should know about Redux Thunk?

Yes! Remember that Redux Thunk allows you to write action creators that return a function instead of an action. This is useful for handling asynchronous logic.