4

I followed the instructions over at the official docs; my app was working just fine in chrome, pointing to localhost:3000. However, now Im running into an issue, because it seems that if a browser doesnt have Redux extension, it won't work. According to the docs, I have written out:

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;

Am I missing something? It seems that others are running into the same issue and solutions seem unique per codebase.

Edit: I've also tried this solution, but Im getting an error TypeError: _store__WEBPACK_IMPORTED_MODULE_12__.default.dispatch is not a function

Edit 2: In chrome incognito mode (where the redux dev tool extension is not enabled), I run into the error,

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

Likewise same error in Firefox.

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

  },

Edit 3:

New error after implementing the suggestion below:

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;
Mike
  • 135
  • 6

1 Answers1

4

Try this:

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;
};

From your link to the github issue the answer is provided and a good amount of discussion around it... (worth another read or two) That answer in turn links to the advanced setup

SakoBu
  • 3,972
  • 1
  • 16
  • 33
  • This looks like the right answer - but you should explain why it works. – dwjohnston Dec 16 '18 at 23:28
  • 1
    You have changed the functionality though. The OP's code is creating a store and returning it. You are returning a function that will always create a new store. – Sulthan Dec 16 '18 at 23:28
  • @Sulthan +1, however the answer is a great one. I've updated my answer to add some depth to my issue. – Mike Dec 17 '18 at 01:15
  • @Sulthan oh, just noticed... force of habit... in any case the way to incorporate redux dev tools with think etc... is still the same and should work... – SakoBu Dec 17 '18 at 01:23
  • I've gone from your suggestion, but I am running into another error (updated the question) – Mike Dec 17 '18 at 03:35
  • @Mike That seems to be a different issue... Coming from your App.js more specifically the dispatch function... There could be a few different things... Maybe you can make a different question and post the relevant code there including the App.js You can tag me there and I'll take a look... – SakoBu Dec 17 '18 at 03:46