Неправильно работает настройка приставки для отображения во всех браузерах

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 (где расширение инструмента редукса не включено), я сталкиваюсь с ошибкой,

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 предоставляется ответ и много обсуждений вокруг него... (стоит еще одного или двух прочтений) Этот ответ, в свою очередь, ссылается на расширенную настройку.