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

Question

当我尝试将商店添加到我的应用程序时 header 出现错误

这是我的store.js代码

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;

这是我的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')
);

能否请您帮助确定这里的问题？提前致谢

Answer 1

运行 saga 应该是在像这样创建商店之后：

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

这里还有一点，关于 TypeError: store.getState is not a function：你返回的是函数，而不是函数的结果：所以通常它应该是这样的：

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

  sagaMiddleware.run(rootSaga);

  return { persistor, store };
};

export default configureStore();

此处未返回持久性，但应用程序可以运行。有如何添加 redux-persist https://github.com/rt2zz/redux-persist#basic-usage 的说明，但是您需要单独获取存储和持久性，例如：

import configureStore from "./store";

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

Answer 2

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

错误解释

你的错误表明你试图过早地执行传奇之前向运行解释过你的中间件。因此，您的解决方案是在创建商店后执行 `saggaMiddleware.run()。

根据您的代码发生了什么

您试图在使用 composeWithDevTools(applyMiddleware(...middlewares))

在第三行安装您的商店之前执行 sagaMiddleware.run() 方法

解决方案

这是一个关于你的行声明顺序的解决方案 + 在 return 之前添加了一行以执行运行SagaMiddleware

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

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