reactjs - 如果未安装 Redux DevTools 扩展,Redux 应用程序将无法工作

标签 reactjs redux react-redux create-react-app redux-devtools-extension

我已按照此处的指南进行操作: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

编辑:我是个白痴。该商店是在两个文件中定义的,我没有更改从中导入它的文件。清理了重复项,它按预期工作。

最佳答案

为了让事情变得更容易,您可以使用 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 };

关于reactjs - 如果未安装 Redux DevTools 扩展,Redux 应用程序将无法工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49190781/

相关文章:

javascript - react 字体大小的 Material 表太小了

javascript - 在 React Redux 中使用 Promises

javascript - 无论我如何尝试,Gatsby.js 的 <Link> 问题

javascript - 如何添加可变饼图来 react 项目?

javascript - 如何使用 highlight.js (React) 正确地突出显示一行代码?

javascript - react 导航 : 'navigation.state.params' is always undefined in 'static navigationOptions'

javascript - TypeError : action. Payload.map.size 不是一个函数

typescript - 具有联合类型的泛型抛出不可分配错误

javascript - 在路由更改时更新组件状态? ( react 路由器)

redux - 将 redux 与 aws-appsync 集成