CODEWITHSUNDEEP
reactjsreduxreact-reduxcreate-react-appredux-devtools-extension
rahulthewall
rahulthewall

Reputation: 795

Redux App not working if Redux DevTools Extension is not installed

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.

Upvotes: 6

Views: 25560

Answers (6)

Muhammad Khizar
Muhammad Khizar

Reputation: 1

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 ), );

Upvotes: 0

Muhammad Khizar
Muhammad Khizar

Reputation: 1

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
  ),
);

Upvotes: 0

Rohan-gajjar
Rohan-gajjar

Reputation: 1

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

Upvotes: 0

Pratik Charwad
Pratik Charwad

Reputation: 737

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

Upvotes: 2

The Qodesmith
The Qodesmith

Reputation: 3375

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.

Upvotes: 2

Tom
Tom

Reputation: 4642

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

Upvotes: 9

Related Questions