如果未安装 Redux DevTools Extension，则 Redux 应用程序不起作用

Question

我遵循了这里的指南：https://redux-observable.js.org/docs/basics/SettingUpTheMiddleware.html(部分：Redux DevTools(

存储按以下方式配置：

// @flow
import { createStore, compose, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { createReducer } from './reducer';
import { epic } from './epic';
const initialState = {};
const configureStore = () => {
  const epicMiddleware = createEpicMiddleware(epic);
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  const enhancers = composeEnhancers(applyMiddleware(epicMiddleware));
  const store = createStore(createReducer(), initialState, enhancers);
  return store;
};
export { configureStore };

但是，如果我没有安装 Redux Devtools 扩展，我的 React 应用程序(使用 CRA 引导(将无法工作。

有人可以告诉我我做错了什么吗？

缺少扩展名的错误日志：https://pastebin.com/qzcbXCYQ

编辑：我是个白痴。存储是在两个文件中定义的，我没有更改从中导入它的那个。清理了重复项，它按预期工作。

Answer 1

为了方便起见，您可以使用 npm 中的 redux-devtools-extension 包。

要安装它，请运行：

npm install --save-dev redux-devtools-extension

并像这样使用：

// @flow
import { createStore, compose, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { createReducer } from './reducer';
import { epic } from './epic';
import { composeWithDevTools } from 'redux-devtools-extension';

const initialState = {};
const configureStore = () => {
  const epicMiddleware = createEpicMiddleware(epic);
  const enhancers = composeEnhancers(applyMiddleware(epicMiddleware));
  const store = createStore(createReducer(), initialState, composeWithDevTools(
      applyMiddleware(epicMiddleware),
      // other store enhancers if any
));
  return store;
};
export { configureStore };

Answer 2

我遇到了类似的问题。我只需要调整一行。我从这里出发：

const composeEnhancers = !__PROD__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose

对此：

const composeEnhancers = !__PROD__ ? (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose) : compose

就我而言，我有可用的__PROD__变量，但请对其进行调整以适应您的情况。逻辑保持不变。

Answer 3

这个问题通常伴随着浏览器没有redux-devtool(也可能发生在chrome隐身chrome中(

我认为你应该检查你的作曲增强器

  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;

参考 ： https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup

Answer 4

这个问题通常伴随着浏览器没有redux-devtool(也可能发生在chrome隐身chrome中(

compose(applyMiddleware(thunk(， window.REDUX_DEVTOOLS_EXTENSION||作曲(

这是寿德被工作

或尝试其他从"redux"导入 { createStore， applyMiddleware， compose };从"Redux-thunk"导入thunk。从"./Reducer/blogReducer"导入博客Reducer;

const store = createStore(博客减速器，compose(applyMiddleware(thunk(， window._REDUX_DEVTOOLS_EXTENSION && window._REDUX_DEVTOOLS_EXTENSION(( || compose((;

导出默认存储