配置 redux 在所有浏览器上显示无法正常工作

Question

我按照官方文档中的说明进行操作；我的应用程序在 Chrome 中运行良好，指向

localhost:3000

。然而，现在我遇到了一个问题，因为似乎如果浏览器没有 Redux 扩展，它就无法工作。根据文档，我写出了：

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers"; //we dont have to put index.js because its called index.js

const initialState = {};

const middleware = [thunk];

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

export default store;

我错过了什么吗？似乎其他人也遇到了同样的问题，并且每个代码库的解决方案似乎都是独一无二的。

---

编辑：我也尝试过这个解决方案，但我收到错误

TypeError: _store__WEBPACK_IMPORTED_MODULE_12__.default.dispatch is not a function

---

编辑2：在chrome隐身模式下（未启用redux dev工具扩展），我遇到了错误，

TypeError: Cannot read property 'apply' of undefined
(anonymous function)
C:/Users/MishaFresh/Desktop/mern-app/MERN_app/client/node_modules/redux/es/redux.js:575
  572 | 
  573 |   return funcs.reduce(function (a, b) {
  574 |     return function () {
> 575 |       return a(b.apply(void 0, arguments));
  576 |     };
  577 |   });
  578 | }

Firefox 中也出现同样的错误。

---

我的

package.json

：

"scripts": {
    "client-install": "npm install --prefix client",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"

  },

---

编辑3：

实施以下建议后出现新错误：

TypeError: _store__WEBPACK_IMPORTED_MODULE_12__.default.dispatch is not a function
Module../src/App.js
C:/Users/Me/Desktop/my-app/app/client/src/App.js:40
  37 | //decode it
  38 | const decoded = jwt_decode(localStorage.jwtToken);
  39 | //set user and isAuthenticated
> 40 | store.dispatch(setCurrentUser(decoded));
     | ^  41 | 
  42 | //check for expired token
  43 | const currentTime = Date.now() / 1000;

Answer 1

试试这个：

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';


const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export default () => {
  const store = createStore(
    combineReducers({
      // your reducers here...
    }),
    composeEnhancers(applyMiddleware(thunk))
  );

  return store;
};

从您到 github 的链接问题提供了答案，并围绕它进行了大量讨论...（值得再读一两遍）该答案又链接到高级设置