如何使用 redux saga 运行 redux devtools？答案

【问题标题】：How to run redux devtools with redux saga?如何使用 redux saga 运行 redux devtools？
【发布时间】：2018-10-04 06:14:06
【问题描述】：

尝试使用 redux saga 运行 reduxdevtools：

收到此错误：

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

这是我的jscode：

const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware),
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

如何使用 saga 运行这个开发工具？或者，什么会起作用？ codepen

【问题讨论】：

标签： redux react-redux redux-saga

【解决方案1】：

我使用了redux-devtools-extension package，如此处所述，redux-devtools-extension documentation。

添加包后，我已将商店定义替换为：

const store = createStore(
  reducer,
  composeWithDevTools(
    applyMiddleware(sagaMiddleware)
  )
);

Fixed Codepen Link

【讨论】：

这里是固定的 Codepen 链接。 codesandbox.io/s/redux-saga-example-63jj6

【解决方案2】：

上一个答案（由 trkaplan 提供）使用来自“redux-devtools-extension”包的导入方法 composeWithDevTools。如果你不想安装这个包，你可以使用这个代码（基于the docs）：

      const composeEnhancers =  typeof window === 'object' && window['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__'] ? 
      window['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__']({ }) : compose;
      const enhancer = composeEnhancers(
        applyMiddleware(thunkMiddleware, sagaMiddleware, /*other middleware*/),
        /* other store enhancers if any */
      );
      const emptyReducer = () => {};
      const store = createStore(emptyReducer, enhancer);

【讨论】：

【解决方案3】：

这是您为实际项目配置 redux、redux-devtool-extension 和 redux-saga 的方式。

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

import rootReducer from '../reducers';
import rootSaga from '../sagas';

const configureStore = () => {
    const sagaMiddleware = createSagaMiddleware();
    return {
        ...createStore(rootReducer, composeWithDevTools(applyMiddleware(sagaMiddleware))),
        runSaga: sagaMiddleware.run(rootSaga),
    };
};

export default configureStore;

【讨论】：

什么是 runSaga ？
@Rhubarb65 runSaga 函数允许在 Redux 中间件环境之外启动 sagas。它还允许您连接到外部输入/输出，而不是存储操作。

【解决方案4】：

使用 Redux 的 Incase Compose。然后下面的代码很有用。第 1 步：添加 chrome Redux DevTools 扩展。第 2 步：npm install redux-devtools-extension。

    import { composeWithDevTools } from 'redux-devtools-extension';
    const store = createStore(
                  reducer,
                  compose(
                  applyMiddleware(sagaMiddleware),
                  composeWithDevTools(),
                  ),
                  );

【讨论】：