How do I handle async actions in React with Redux and TypeScript?

How do I handle async actions in React with Redux and TypeScript?

You can handle async actions in React with Redux and TypeScript using middleware like Redux Thunk or Redux Saga. Would you like an example?

Yes, please provide an example using Redux Thunk.

Sure! First, install Redux Thunk. Then, create an async action like this:

import { ThunkAction } from 'redux-thunk';
import { RootState } from './store';

export const fetchData = (): ThunkAction<void, RootState, unknown, Action<string>> => 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 });
  }
};

What about using Redux Saga instead?

With Redux Saga, you can create a saga to handle async actions. Here's a simple example:

import { call, put, takeEvery } from 'redux-saga/effects';

function* fetchDataSaga() {
  try {
    const response = yield call(fetch, 'https://api.example.com/data');
    const data = yield response.json();
    yield put({ type: 'FETCH_DATA_SUCCESS', payload: data });
  } catch (error) {
    yield put({ type: 'FETCH_DATA_FAILURE', error });
  }
}

export function* watchFetchData() {
  yield takeEvery('FETCH_DATA_REQUEST', fetchDataSaga);
}