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

【问题标题】：Redux TypeError: Cannot read property 'apply' of undefinedRedux TypeError：无法读取未定义的属性“应用”
【发布时间】：2019-04-30 02:01:14
【问题描述】：

我已禁用 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 push origin master 到我的存储库，当我编译时突然出现这个错误：

我在我的前端使用这个：

  "@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：

【问题讨论】：

标签： javascript reactjs redux react-redux

【解决方案1】：

出错前：

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;

【讨论】：

【解决方案2】：

改变这一行

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

到

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

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

【讨论】：

【解决方案3】：

这个错误是因为：

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))
)

【讨论】：

【解决方案4】：

在我的情况下，此错误导致在移动浏览器上的生产版本中出现空白/白屏，但在桌面浏览器中没有。接受的答案对我不起作用，我不得不删除该行，添加 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;

这样就解决了。

【讨论】：

【解决方案5】：

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

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

在客户端目录下：npm install --save-dev redux-devtools-extension
将 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;

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

这对我有用：

这个错误是因为：

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))
)

【讨论】：

【解决方案8】：

我变了

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

到这里：

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

问题解决了

【讨论】：

【解决方案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 工具中间件。因为我没有在这个帖子中看到这个解决方案所以我发布了它希望它对某人有用..

【讨论】：

【解决方案10】：

Redux DevTools 2.17.0 版发生在我身上。

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

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

【讨论】：

【解决方案11】：

确保您已下载适用于 chrome 的 redux-devtools 扩展程序，并将网站访问权限更改为 在所有网站上 或 在特定网站上前往 Manage Extension > Redux DevTools(details) > Site access

【讨论】：

【解决方案12】：

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

【讨论】：

【解决方案13】：

就我而言，解决此问题的最佳方法很简单。

你知道 cypress 在开发者模式下打开 chrome，它没有你的扩展，包括 redux devtools。

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

【讨论】：

【解决方案14】：

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

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

【讨论】：

【解决方案15】：

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

问题是来自redux 的compose 期望它的所有参数都是函数。所以当

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

在返回布尔值的环境中进行评估。

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

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

【讨论】：

为我工作。就我而言，当我在 Opera 浏览器（我没有安装 redux devtools）上打开 localhost 时，应用程序崩溃了。在 chrome 中，它可以正常工作，因为我有扩展名。谢谢！

【解决方案16】：

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

或

从你的代码中删除这一行

window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__()

【讨论】：

为什么会这样？
是 redux-devtools-extension 的新 v2.16.0 版本的一个问题。但现在在 v2.16.1 中修复

【解决方案17】：

最后一个堆栈显示了对 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

【讨论】：

我已经关闭了react devtools和redux devtools，结果还是一样