Using Redux-Saga for Type-Safe Asynchronous Flows

Set up a Redux-Saga example where type checking is enforced in complex asynchronous flows to prevent type issues when dispatching actions after async operations.
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { call, put, takeEvery } from 'redux-saga/effects';
import { ActionType, TypedActionCreator } from 'typesafe-actions';

// Define action types
enum ActionTypes {

// Define action creators with typesafe-actions
const fetchStart: TypedActionCreator<ActionTypes.FETCH_START> = () => ({
  type: ActionTypes.FETCH_START,

const fetchSuccess: TypedActionCreator<ActionTypes.FETCH_SUCCESS> = (data: any) => ({
  type: ActionTypes.FETCH_SUCCESS,
  payload: data,

const fetchFailure: TypedActionCreator<ActionTypes.FETCH_FAILURE> = (message: string) => ({
  type: ActionTypes.FETCH_FAILURE,
  payload: message,

// Define the root reducer
const rootReducer = (state = {}, action: ActionType<typeof fetchStart | typeof fetchSuccess | typeof fetchFailure>) => {
  switch (action.type) {
    case ActionTypes.FETCH_SUCCESS:
      return { ...state, data: action.payload };
    case ActionTypes.FETCH_FAILURE:
      return { ...state, error: action.payload };
      return state;

// Define a saga to handle fetching
function* fetchSaga(): Generator {
  try {
    const data = yield call(apiFetch); // Replace 'apiFetch' with your API call
    yield put(fetchSuccess(data));
  } catch (error) {
    yield put(fetchFailure(error.message));

// Root saga
function* rootSaga() {
  yield takeEvery(ActionTypes.FETCH_START, fetchSaga);

// Setup saga middleware
const sagaMiddleware = createSagaMiddleware();

// Create store with saga middleware
const store = createStore(

// Run the root saga;

export { store, fetchStart, fetchSuccess, fetchFailure };
// This code sets up a redux store with saga middleware, using type-safe actions to fetch data asynchronously. The saga handles fetch side effects, capturing both success and failure cases.
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Redux-Saga Type-Safe Example</title>
    <script src="/path/to/your/compiled-redux-saga-code.js"></script>
    <div id="app">
      <!-- Content will be managed by React/Redux etc. -->
// This is the HTML structure where Redux-Saga will be used. The actual Redux-Saga logic would be in a separate JavaScript file included with a script tag.
body {
    font-family: 'Arial', sans-serif;

#app {
    margin: 20px;
    padding: 20px;
    border: 1px solid #ccc;
// Basic CSS for the #app to make it visually distinct with some padding and a border.