Integrating Redux-Saga with Redux v5.0.0

Provide a practical example of how to integrate redux-saga with the updated middleware system in Redux v5.0.0.
import { configureStore } from '@reduxjs/toolkit';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import rootSaga from './sagas';

// Create the saga middleware
const sagaMiddleware = createSagaMiddleware();

// Mount it on the Store
const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(sagaMiddleware)

// Then run the saga;

export default store;
This snippet shows how to create a Redux store with sagas integrated using redux-saga and @reduxjs/toolkit. It creates the saga middleware, adds it to the store's middleware, and runs the saga.
import { takeEvery, put, call } from 'redux-saga/effects';

// Worker saga
function* fetchData(action) {
  try {
    const data = yield call(Api.fetchUser, action.payload.url);
    yield put({type: 'FETCH_SUCCEEDED', data});
  } catch (error) {
    yield put({type: 'FETCH_FAILED', error});

// Watcher saga
function* watchFetchData() {
  yield takeEvery('FETCH_REQUESTED', fetchData);

export default watchFetchData;
Defines the saga watchers and workers. The worker saga `fetchData` performs the API call and dispatches success or failure actions. The watcher saga `watchFetchData` listens for `FETCH_REQUESTED` actions to trigger the worker saga.
function rootReducer(state = {}, action) {
  switch (action.type) {
      return {...state, data:, error: null};
    case 'FETCH_FAILED':
      return {...state, data: null, error: action.error};
      return state;

export default rootReducer;
Defines the root reducer with cases to handle the actions dispatched by sagas for successful or failed data fetches.
<!DOCTYPE html>
  <title>Redux-Saga Example</title>
  <script src="path_to_your_store.js"></script>
  <!-- Include other scripts here -->
  <div id="app"></div>
  <!-- React Components will be mounted here -->
A basic HTML structure which includes the store configuration script. It provides a mounting point for a React application.
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

#app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
CSS styles providing basic global styles and centering the app's contents within the #app div.
const Api = {
  fetchUser: (url) => { /* Implementation for fetching user */ }

export default Api;
A placeholder for the API object with a fetchUser function to simulate an asynchronous call to fetch user data.