Redux App not working if Redux DevTools Extension is not installed

Question

I have followed the guide here: https://redux-observable.js.org/docs/basics/SettingUpTheMiddleware.html (Section: Redux DevTools)

The store is configured in the following manner:

// @flow

import { createStore, compose, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { createReducer } from './reducer';
import { epic } from './epic';

const initialState = {};

const configureStore = () => {
  const epicMiddleware = createEpicMiddleware(epic);
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  const enhancers = composeEnhancers(applyMiddleware(epicMiddleware));
  const store = createStore(createReducer(), initialState, enhancers);
  return store;
};

export { configureStore };

However, my React Application (bootstrapped with CRA) will not work if I don't have the Redux Devtools Extension installed.

Can someone please tell me what it is that I am doing incorrectly?

Error log on missing extension: https://pastebin.com/qzcbXCYQ

EDIT: I am an idiot. The store was defined in two files, and I was not changing the one where I was importing it from. Cleaned up the duplicates, and it is working as expected.

Answer 1

To make things easier, you can use the redux-devtools-extension package from npm.

To install it run:

npm install --save-dev redux-devtools-extension

and to use like so:

// @flow

import { createStore, compose, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { createReducer } from './reducer';
import { epic } from './epic';

import { composeWithDevTools } from 'redux-devtools-extension';


const initialState = {};

const configureStore = () => {
  const epicMiddleware = createEpicMiddleware(epic);
  const enhancers = composeEnhancers(applyMiddleware(epicMiddleware));
  const store = createStore(createReducer(), initialState, composeWithDevTools(
      applyMiddleware(epicMiddleware),
      // other store enhancers if any
));
  return store;
};

export { configureStore };

Answer 2

I was experiencing a similar issue. I just needed to tweak a single line. I went from this:

const composeEnhancers = !__PROD__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose

To this:

const composeEnhancers = !__PROD__ ? (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose) : compose

In my case I have the __PROD__ variable available, but tweak that to suit your situation. Logic remains the same.