Redux TypeError：无法读取未定义的属性“应用”

Question

我禁用了 react devtools 和 redux devtools。

几个小时以来，我一直在寻找解决这个问题的方法，大多数问题都在撰写中，而我根本不更改代码。

import { createStore, applyMiddleware,compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState={};

const middleware = [thunk];

const store = createStore(rootReducer,initialState,
    compose(
        applyMiddleware(...middleware),
        window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__()
        )   
    );


export default store;

我真的不明白为什么会这样。 我什么都没做，我做的最后一件事就是做 git 将原始主机推送到我的存储库，突然当我编译时我得到了这个错误：

我在我的前端使用这个：

  "@material-ui/core": "^3.3.1",
    "@material-ui/icons": "^3.0.1",
    "axios": "^0.18.0",
    "jwt-decode": "^2.2.0",
    "prop-types": "^15.6.2",
    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "react-redux": "^5.1.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.0.5",
    "react-select": "^2.1.1",
    "recharts": "^1.3.5",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "typeface-roboto": "0.0.54"

后端：

 "dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.18.3",
    "express": "^4.16.4",
    "mongoose": "^5.3.11",
    "multer": "^1.4.1",
    "passport": "^0.4.0",
    "passport-jwt": "^4.0.0",
    "path": "^0.12.7",
    "validator": "^10.9.0",
    "xlsx": "^0.14.1"
  },
  "devDependencies": {
    "concurrently": "^4.0.1",
    "nodemon": "^1.18.6",
  },

结果错误：

Redux：

Answer 1

将您的 redux 开发工具从 2.16.0 更新到 2.16.1

或者

从您的代码中删除此行

window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__()

Answer 2

当我想在隐身窗口上测试我的网络应用程序时，我遇到了同样的问题（扩展程序不显示在隐身窗口上）。

问题是compose from redux希望它的所有参数都是函数。 所以当

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 

在该环境中评估它返回一个布尔值。

正如@knutwalker 提到的。 您需要返回一个不返回任何内容的函数。 这为我修好了，

      window.__REDUX_DEVTOOLS_EXTENSION__
        ? window.__REDUX_DEVTOOLS_EXTENSION__()
        : f => f

Answer 3

最后一个堆栈显示了在client/src/store.js:9中对 compose 的调用，其中第二个参数是window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 。

但是，如果您禁用了 devtools，则__REDUX_DEVTOOLS_EXTENSION__未定义并成为 compose 函数的第二个参数。 它仍然是显式提供的，这与它通过省略隐式未定义不同，因此 compose 实现认为有两个有效参数并期望它们是函数，而不是未定义的。

如果没有可用的开发工具，您应该返回一个虚拟函数，例如可能，尽管我不太确定确切的签名必须是什么才能满足 createStore 函数。

window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : (a) -> a

Answer 4

对我来说，我向 Chrome 添加了 redux-devtools 扩展，一旦我将 redux-devtools 添加到浏览器，错误就消失了，您也不需要使用三元运算符。

https://github.com/reduxjs/redux/issues/2359#issuecomment-362340634

Answer 5

此错误的原因在于问题本身。 只需启用 React 和 Redux DevTools 扩展。 对于同样的错误，它对我有用。

Answer 6

在我的情况下，我解决这个问题的最好方法很简单。

您知道 cypress 在开发人员模式下打开 chrome，该模式没有您的扩展，包括 redux devtools。

因此，当 chrome 上的窗口打开并出现错误时，单击菜单 > 更多工具 > 扩展程序，然后转到 chrome webstore 以安装redux devtools 。

Answer 7

我变了

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

对此：

typeof window.__REDUX_DEVTOOLS_EXTENSION__ === "undefined"
? a => a
: window.__REDUX_DEVTOOLS_EXTENSION__ &&
    window.__REDUX_DEVTOOLS_EXTENSION__()

问题解决了

Answer 8

这个错误是因为：

const store=createStore(rootreducer,
    initialstate,
    compose(applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
)

在部署您的项目时，您没有这样做：

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 

在运行命令npm run build确保将其删除。
正确的方法是：

const store=createStore(rootreducer,
    initialstate,
    compose(applyMiddleware(...middleware))
)

Answer 9

我遇到了类似的问题，删除这些行就成功了，

 window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

但这不是一个永久的解决方案，因为再次使用 redux 开发工具你需要这些行。 而是使用

process.env.NODE_ENV==="development" ?
       window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() : compose,

它使用环境变量来检查天气以使用 Reduxdev 工具中间件与否。 因为我没有在这个线程中看到这个解决方案所以我发布了它希望它对某人有用..

Answer 10

在我的情况下，此错误导致在移动浏览器上的生产版本中出现空白/白屏，但在桌面浏览器中不会。 接受的答案对我不起作用，我必须删除该行，添加 devtools 扩展，并重构以使用 composeWithDevTools 导入。 也就是说，@Roman 的回答对我来说是一个完整的工作解决方案（谢谢先生）。 但它可能有助于其他人澄清问题可以独立于 redux-saga 发生。 我的应用程序只是使用基本的 redux-thunk。 我安装了 redux-devtools-extension 作为开发依赖项，然后替换了这个：

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {};

const middleware = [thunk];

if (nodeEnv !== 'production') {
  const store = createStore(rootReducer, initialState, compose(applyMiddleware(...middleware)));
} else {
  const store = createStore(
    rootReducer,
    initialState,
    compose(
      applyMiddleware(...middleware),
      window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
    ),
  );
}

export default store;

有了这个：

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {};

const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  composeWithDevTools(applyMiddleware(...middleware))
);

export default store;

这修复了它。

Answer 11

确保您已下载适用于 chrome 的redux-devtools扩展，并将站点访问权限更改为在所有站点或特定站点上，方法是转到管理扩展 > Redux DevTools（详细信息）> 站点访问

Answer 12

这发生在我的 Redux DevTools 2.17.0 版中。

扩展中的某些内容已损坏。

我刚刚从 Chome 中删除了扩展程序，重新安装了它，它就像一个魅力。

Answer 13

这对我有用：

这个错误是因为：

const store=createStore(rootreducer,
    initialstate,
    compose(applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
)

部署项目时，删除最后一行，如下所示：

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

在运行命令 npm run build 时，请确保将其删除。 正确的方法是：

const store=createStore(rootreducer,
    initialstate,
    compose(applyMiddleware(...middleware))
)

Answer 14

在 Chrome 隐身窗口中出现同样的错误。 更改为普通 Chrome，一切正常。

Answer 15

这是@Koop 对我有用的完整答案：

对于在 node_modules/redux/es/redux.js 中遇到“TypeError: Cannot read property 'apply' of undefined”的每个人：错误：立即修复：安装 Chrome 扩展 Redux Devtools 所有浏览器的永久修复：

1. 在客户端目录中： npm install --save-dev redux-devtools-extension
2. 将 client/src/store/index.js 更改为：

---

import { applyMiddleware, createStore, } from ‘redux’;
import createSagaMiddleware from ‘redux-saga’;

import rootReducer from ‘./reducers/index’;
import rootSaga from ‘./sagas/index’;
import { composeWithDevTools } from ‘redux-devtools-extension’;

const sagaMiddleware = createSagaMiddleware();
const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(sagaMiddleware))
);
sagaMiddleware.run(rootSaga);
export default store;

Answer 16

改变这条线

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

到

window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f

将解决这个问题，它对我有用。

Answer 17

出错前：

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {};

const middleWare = [thunk];

const store = createStore(rootReducer, initialState, compose(
    applyMiddleware(...middleWare),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
));

export default store;

删除错误后：

在 Store.js 中，我们必须删除

窗户。 REDUX_DEVTOOLS_EXTENSION && 窗口。 REDUX_DEVTOOLS_EXTENSION ()

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {};

const middleWare = [thunk];

const store = createStore(rootReducer, initialState, compose(
    applyMiddleware(...middleWare)
));

export default store;

Answer 18

对于说删除以下代码行的答案

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

首先让我们知道它的作用：它会尝试检查 Chrome 的 Redux Devtools 扩展是否可用于 Redux 商店连接。

禁用扩展

• Go 到chrome://extensions 。
• 找到并禁用此扩展程序。
• 使用打开的 Chrome 开发者工具刷新您的应用。
• 在控制台中window.__REDUX_DEVTOOLS_EXTENSION__ ，它应该返回undefined 。 注意：这也是隐身 window 的情况

启用扩展

• Go 到chrome://extensions 。
• 找到并启用此扩展程序。
• 使用打开的 Chrome 开发者工具刷新您的应用。
• 在控制台中window.__REDUX_DEVTOOLS_EXTENSION__ ，它应该返回一个 function 定义。

IMO，只有当您不再有兴趣使用此扩展程序来调试您的应用程序时，才应将其删除。 禁用它并不/不应该意味着我们完全删除了代码中连接以进行调试的能力。

---

接下来，一旦我们知道了这行代码的作用，并且我们有兴趣在以后的任何调试中使用这个扩展，我们应该处理这两种情况，当扩展可用和不可用时，而不是删除代码本身连接到它。

基本商店设置

如果您有如下所示的基本商店设置，即它不使用中间件或增强器

const store = createStore(
   reducer, /* preloadedState, */
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );

它检查扩展是否可用，如果可用则调用它，如果没有则什么都不做，这意味着undefined 。 createStore方法似乎可以正确处理undefined的情况并且代码工作正常。

高级商店设置

如果您有如下所示的Advanced Store 设置，即它使用中间件或使用applyMiddleware增强器，或者您可以说我们使用compose

const store = createStore(reducer, /* preloadedState, */ compose(
  applyMiddleware(...middleware)
));

使用compose连接到扩展的代码是（这是问题中的情况）

const store = createStore(reducer, /* preloadedState, */ compose(
  applyMiddleware(...middleware),
  window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__()
));

compose希望其 arguments 为function类型，并且发现 devtools 扩展可以返回undefined 。 对于undefined的情况，它会尝试使用undefined.apply方法并抛出错误。 这是问题的根本原因。

解决方案 - 不那么完整

正如许多人回答的那样，使用window.__REDUX_DEVTOOLS_EXTENSION__? window.__REDUX_DEVTOOLS_EXTENSION__(): f => f window.__REDUX_DEVTOOLS_EXTENSION__? window.__REDUX_DEVTOOLS_EXTENSION__(): f => f

对于未定义的情况，它将运行(f => f).apply成功执行。 但这更像是在欺骗compose方法，对我来说看起来很hacky。

解决方案 - 完成

如果有一种方法可以让我决定是否使用 compose，或者有一种方法可以增强 compose 方法。

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
  applyMiddleware(...middleware)
));

Please note that you need not now check window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() because it has been taken care of in window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

您可以在启用和禁用扩展时验证此代码（上面给出了步骤）。 这应该可以正常工作，没有任何问题。

所有这些代码片段都来自 Redux devtools 自述文件。

这些代码仅用于在开发/本地环境中进行调试。 对于生产，您可以添加条件以退出。