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.

yes, you must add redux dev tool. Because with installing dev tool you can not add that to your store. — Jani Devang, Mar 09 '18 at 09:45
Eh no, it should default to using `compose` from `redux` when the extension is not present. — rahulthewall, Mar 09 '18 at 10:01
When you don't have the dev tools installed, what errors do you get? A little more info about your project (build setup etc.) could also be helpful. — noppa, Mar 09 '18 at 10:08
@noppa It's vanilla CRA (not ejected), and error log is here: https://pastebin.com/qzcbXCYQ — rahulthewall, Mar 09 '18 at 10:23

score 7 · Answer 1 · answered Mar 09 '18 at 10:20

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

and if one has the extension installed in Chrome already and does not wish to NPM it? — vsync, Aug 12 '18 at 18:04

score 2 · Answer 2 · answered Nov 13 '18 at 11:00

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.

score 1 · Answer 3 · answered Jan 03 '19 at 07:53

This problem usually comes with browsers dont having redux-devtool (May occur in chrome incognito chrome also)

I think you should check with your composeEnhancers

  const composeEnhancers =
      typeof window === 'object' &&
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
    }) : compose;

reference : https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup

Rohan-gajjar · Answer 4 · 2022-02-22T05:00:43.077

0

This problem usually comes with browsers dont having redux-devtool (May occur in chrome incognito chrome also)

compose(applyMiddleware(thunk), window.REDUX_DEVTOOLS_EXTENSION||compose)

it's Shoud be worked

or try another import { createStore, applyMiddleware, compose } from "redux"; import thunk from "redux-thunk" import blogReducer from "./Reducer/blogReducer";

const store = createStore( blogReducer, compose(applyMiddleware(thunk), window._REDUX_DEVTOOLS_EXTENSION && window._REDUX_DEVTOOLS_EXTENSION() || compose));

export default store

edited Feb 22 '22 at 05:00

answered Feb 18 '22 at 10:37

Rohan-gajjar

1
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 18 '22 at 12:05

Redux App not working if Redux DevTools Extension is not installed

4 Answers4

Linked