What is the use of middleware Redux Saga ?

// actions/index.js

export const fetchDataRequest = () => ({
    type: "FETCH_DATA_REQUEST",
});

export const fetchDataSuccess = (data) => ({
    type: "FETCH_DATA_SUCCESS",
    payload: data,
});

export const fetchDataFailure = (error) => ({
    type: "FETCH_DATA_FAILURE",
    payload: error,
});

export const deleteDataRequest = () => ({
    type: "DELETE_DATA_REQUEST",
});

// reducers/index.js

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

const dataReducer = (state = initialState, action) => {
    switch (action.type) {
        case "FETCH_DATA_SUCCESS":
            return {
                ...state,
                data: action.payload,
                error: null,
            };
        case "FETCH_DATA_FAILURE":
            return {
                ...state,
                data: null,
                error: action.payload,
            };
        case "DELETE_DATA_REQUEST":
            return {
                ...state,
                data: null,
                error: null,
            };
        default:
            return state;
    }
};

export default dataReducer;

// sagas/index.js
import { takeEvery, put, call } from "redux-saga/effects";
import * as actions from "../actions";

// Simulate an API call
const fetchDataFromAPI = async () => {
    try {
        const response = await fetch(
            "https://jsonplaceholder.typicode.com/todos/1"
        );
        const data = await response.json();
        return data;
    } catch (error) {
        throw error;
    }
};

function* fetchData() {
    try {
        const data = yield call(fetchDataFromAPI);
        yield put(actions.fetchDataSuccess(data));
    } catch (error) {
        yield put(actions.fetchDataFailure(error.message));
    }
}

export function* watchFetchData() {
    yield takeEvery("FETCH_DATA_REQUEST", fetchData);
}

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { configureStore } from "@reduxjs/toolkit";
import { Provider } from "react-redux";
import createSagaMiddleware from "redux-saga";
import rootReducer from "./reducers";
import { watchFetchData } from "./sagas";

const sagaMiddleware = createSagaMiddleware();

const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware().concat(sagaMiddleware),
});

sagaMiddleware.run(watchFetchData);
const root = ReactDOM.createRoot(
    document.getElementById("root")
);
root.render(
    <Provider store={store}>
        <React.StrictMode>
            <App />
        </React.StrictMode>
    </Provider>
);

// If you want to start measuring performance in 
// your app, pass a function to log results 
// (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. 

//components/myComponents.js

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
    fetchDataRequest,
    deleteDataRequest,
} from "../actions";
const MyComponent = () => {
    const dispatch = useDispatch();
    const data = useSelector((state) => state.data);
    const error = useSelector((state) => state.error);

    useEffect(() => {
        dispatch(fetchDataRequest());
    }, [dispatch]);

    const handleDeleteData = () => {
        dispatch(deleteDataRequest());
    };

    return (
        <div className="app-container">
            <h1>Redux Saga App</h1>
            <div className="data-container">
                {data ? (
                    <div className="data">
                        {JSON.stringify(data)}
                    </div>
                ) : (
                    <div className="loading">
                        {error
                            ? `Error: ${error}`
                            : "Loading data..."}
                    </div>
                )}
            </div>
            <button
                className="fetch-button"
                onClick={() => dispatch(fetchDataRequest())}
            >
                Fetch Data
            </button>
            <button
                className="delete-button"
                onClick={handleDeleteData}
            >
                Delete Data
            </button>
        </div>
    );
};

export default MyComponent;

import "./App.css";
import MyComponent from "./components/myComponent";

function App() {
    return <MyComponent />;
}

export default App;