Getting an Error: Before running a Saga, you must mount the Saga middleware on the Store using the a-CodePudding

I'm getting the error on the header when I try to add the store into my app

this is my store.js code

import { createStore, applyMiddleware } from 'redux';
import { persistStore } from 'redux-persist';
import logger from 'redux-logger';
import createSagaMiddleware from 'redux-saga';
import { composeWithDevTools } from 'redux-devtools-extension';

import rootReducer from './root-reducer';
import rootSaga from './root-saga';

const sagaMiddleware = createSagaMiddleware();
const middlewares = [sagaMiddleware];

//if (process.env.NODE_ENV === 'development') {
  middlewares.push(logger);
//}
sagaMiddleware.run(rootSaga);

const configureStore = () => {
  const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(...middlewares)));
  const persistor = persistStore(store);
  return { persistor, store };
};

export default configureStore;

This is my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from "react-router-dom";
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import App from './App';
import configureStore from './redux/store';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={configureStore}>
      <Router>
        <PersistGate persistor={configureStore}>
          <App />
        </PersistGate>
      </Router>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

Could you please help identify the issue here please? Thanks in advance

CodePudding user response：

Running saga should be after creating the store like that:

...
const configureStore = () => {
  const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(...middlewares)));
  sagaMiddleware.run(rootSaga);
  const persistor = persistStore(store);
  return { persistor, store };
};

Another point here, regarding TypeError: store.getState is not a function: you're returning function, not a result of the function: so typically it should be like this:

const configureStore = () => {
  const store = createStore(
rootReducer,
composeWithDevTools(applyMiddleware(...middlewares))
  );
  const persistor = persistStore(store);

  sagaMiddleware.run(rootSaga);

  return { persistor, store };
};

export default configureStore();

The persistor isn't returned here, but the application works. There is an instruction how to add redux-persist https://github.com/rt2zz/redux-persist#basic-usage, but then you need to get separately store and persistor like:

import configureStore from "./store";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={configureStore.store}>
      <Router>
        <App />
      </Router>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);```

CodePudding user response：

Getting an Error: Before running a Saga, you must mount the Saga middleware on the Store using the applyMiddleware

Error explanation

Your error says you are trying to execute a saga too soon Explaining you to run your middleware before. Therefore your solution is to execute `saggaMiddleware.run() after creating your store.

What happened based on your code

You were trying to execute sagaMiddleware.run() method before mounting your store at the third line with composeWithDevTools(applyMiddleware(...middlewares))

Solution

Here is a solution respecting your line declarations order added one more line before return to execute the runSagaMiddleware

const runSagaMiddleware = () => sagaMiddleware.run(rootSaga);
const configureStore = () => {
  const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(...middlewares)));
  const persistor = persistStore(store);
  runSagaMiddleware();
  return { persistor, store };
};