出现错误：在运行 Saga 之前，您必须使用 applyMiddleware 在 Store 上挂载 Saga 中间件答案

【问题标题】：Getting an Error: Before running a Saga, you must mount the Saga middleware on the Store using the applyMiddleware出现错误：在运行 Saga 之前，您必须使用 applyMiddleware 在 Store 上挂载 Saga 中间件
【发布时间】：2021-12-10 17:57:43
【问题描述】：

当我尝试将商店添加到我的应用程序时，我在标题中收到错误

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

您能帮忙找出这里的问题吗？提前致谢

【问题讨论】：

运行 saga 应该在创建商店之后。 redux-saga.js.org/docs/introduction/… 喜欢这里在该部分的底部

标签： reactjs react-redux

【解决方案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-persisthttps://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")
);```

【讨论】：

当我这样做时，我得到了一个新错误：
TypeError: store.getState 不是函数
请看更新后的答案
答案又更新了

【解决方案2】：

遇到错误：在运行 Saga 之前，您必须使用 applyMiddleware 在 Store 上挂载 Saga 中间件

错误说明

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

根据您的代码发生了什么

在使用composeWithDevTools(applyMiddleware(...middlewares)) 将商店挂载到第三行之前，您尝试执行sagaMiddleware.run() 方法

解决方案

这是一个尊重您的行声明顺序的解决方案 + 在返回执行 runSagaMiddleware 之前再添加一行

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

【讨论】：