Redux TypeError: Cannot read property 'apply&#

2019-04-28 21:40发布

问题:

I have disabled react devtools and redux devtools.

I've been searching for ways to deal with this problem for hours, and most of the problems are in compose while I don't change code at all.

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;

I really don't understand why this happened. I don't change anything and the last thing I do is just do git push origin master to my repository and suddenly when I compiled I got this error:

Iam Using this in my front end :

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

Back-end :

 "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",
  },

Result Error:

Redux :

回答1:

Update your redux dev tools from 2.16.0 to 2.16.1

OR

Remove this line from your code

window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__()


回答2:

The last stack shows a call to compose in client/src/store.js:9 where the second argument is window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__().

If you have the devtools disabled however, __REDUX_DEVTOOLS_EXTENSION__ is undefined and becomes the second argument to compose function. It is still explicitly provided, which is different from it being implicitly undefined by omission, so the compose implementation thinks that there are two valid arguments and expects them to be functions, not undefined.

You should return a dummy function in case there are no devtools available, something like the maybe, though I'm not quite sure what the exact signature must be to satisfy the createStore function.

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



回答3:

I had this same issue when I wanted to test my web app on an incognito window (extensions don't show up on incognito windows).

The issue is that compose from redux expects all its arguments to be functions. So when

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 

is evaluated in that environment it returns a boolean.

As @knutwalker mentioned. You'd need to return a function that returns nothing. This fixed it for me,

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