如果未安装 Redux DevTools 扩展，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 中）

我认为你应该检查你的 composeEnhancers

  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），窗口。REDUX_DEVTOOLS_EXTENSION||compose）

应该工作

或者尝试另一个 从“redux”导入{ createStore、applyMiddleware、compose }； 从“redux-thunk”导入 thunk 从“./Reducer/blogReducer”导入blogReducer；

常量存储 = createStore( 博客减速器， compose(applyMiddleware(thunk), window._REDUX_DEVTOOLS_EXTENSION && window._REDUX_DEVTOOLS_EXTENSION() || compose));

导出默认商店

Answer 5

查看最新的 redux-devtool npm npm 我 redux-devtools-extension

从 'redux' 导入 { createStore, applyMiddleware }; 从 '@redux-devtools/extension' 导入 { composeWithDevTools };

常量存储 = createStore( 减速器， composeWithDevTools( 应用中间件（...中间件）， // 其他存储增强器（如果有） ), );