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 Extension，我的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

如果未安装Redux DevTools Extension，则Redux App无法正常工作

3 个答案: