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.

Marque

yes, you must add redux dev tool. Because with installing dev tool you can not add that to your store. – Acerbic

Eh no, it should default to using compose from redux when the extension is not present. – Marque

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. – Butternut

@Butternut It's vanilla CRA (not ejected), and error log is here: pastebin.com/qzcbXCYQ – Marque

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

Orlandoorlanta

and if one has the extension installed in Chrome already and does not wish to NPM it? – Tosha

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.

Premed

Answer 3

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

Calves

Answer 4

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

Cholula

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. – Gelatinate

Answer 5

checkout latest redux-devtool npm npm i redux-devtools-extension

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from '@redux-devtools/extension';

const store = createStore(
  reducer,
  composeWithDevTools(
    applyMiddleware(...middleware),
    // other store enhancers if any
  ),
);

Rapport

Answer 6

Check out here new redux https://www.npmjs.com/package/@redux-devtools/extension

import { createStore, applyMiddleware } from 'redux'; import { composeWithDevTools } from '@redux-devtools/extension';

const store = createStore( reducer, composeWithDevTools( applyMiddleware(...middleware), // other store enhancers if any ), );

Rapport

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Gelatinate