Before running a Saga, you must mount the Saga middleware on the Store using applyMiddleware with redux tool

Question

Can someone help with this,
Error: Before running a Saga, you must mount the Saga middleware on the Store using applyMiddleware

Mounted sagaMiddleware still it throw an error on the page
Added redux-saga to Store with saga Middleware
Store Js

import { createStore, applyMiddleware, compose } from "redux";
import { persistStore } from "redux-persist";
import createSagaMiddleware from 'redux-saga'
import {fetchCollectionsStart} from './shop/shop.sagas'
import logger from "redux-logger";
import rootReducer from "./root-reducer";

const sagaMiddleware = createSagaMiddleware();

const middlewares = [sagaMiddleware];

if (process.env.NODE_ENV === "development") {
  middlewares.push(logger);
}
const composeEnhancers =
  typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
      })
    : compose;

const enhancer = composeEnhancers(
  applyMiddleware(...middlewares,sagaMiddleware)
  // other store enhancers if any
);

sagaMiddleware.run(fetchCollectionsStart);

export const store = createStore(rootReducer, enhancer);
export const persistor = persistStore(store);

Created this saga to fetch the collections once the component is mounted
Sagas.js

import {takeEvery} from 'redux-saga/effects';
import ShopActionTypes from './shop.types';

export function* fetchCollectionsAsync(){
    yield console.log('Good');
}
export function* fetchCollectionsStart(){
    yield takeEvery(ShopActionTypes.FETCH_COLLECTIONS_START,
        fetchCollectionsAsync );
}

Answer 1

Make sure you run sagaMiddleware.run(fetchCollectionsStart); after createStore

const { useState, useEffect } = React;
const { bindActionCreators, combineReducers, createStore, applyMiddleware, compose } = Redux;
const { connect, Provider } = ReactRedux;
const createSagaMiddleware = ReduxSaga.default;
const { takeEvery } = ReduxSagaEffects;
const sagaMiddleware = createSagaMiddleware();
const reducer = (state = {}, action) => {
  return state;
}

const enhancer = compose(
  applyMiddleware(sagaMiddleware)
);

const reducers = combineReducers({
  reducer
})

const store = createStore(
  reducers,
  enhancer
);

function* fetchCollectionsAsync(){
    yield console.log('Good');
}

function* fetchCollectionsStart(){
    yield takeEvery('FETCH_COLLECTIONS_START',
        fetchCollectionsAsync );
}

sagaMiddleware.run(fetchCollectionsStart);

const action = () => ({
  type: 'FETCH_COLLECTIONS_START'
})

const mapStateToProps = state => ({
  
})

const mapDispatchToProps = ({
  action
})

const _App = ({action}) => {
  useEffect(() => {
    action();
  }, [])
  
  return <div>
  </div>
}

const App = connect(mapStateToProps, mapDispatchToProps)(_App)

ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('root')
  );

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.10.1/polyfill.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/redux@4.0.5/dist/redux.js"></script>
<script src="https://unpkg.com/react-redux@latest/dist/react-redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-saga/1.1.3/redux-saga.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-saga/1.1.3/redux-saga-effects.umd.js"></script>
<div id="root"></div>