"No store found" when using Redux chrome extension

Question

I have a problem with redux chrome extension.

I have the following code in my configureStore.js file :

import {createStore, applyMiddleware} from 'redux';
import rootReducer from '../reducers/index';
import thunk from 'redux-thunk';

export default function configureStore(initialState){
  return createStore(
    rootReducer,
    initialState,
    applyMiddleware(thunk),
    window.devToolsExtension ? window.devToolsExtension() : f => f
  );
}

I've added window.devToolsExtension ? window.devToolsExtension() : f => f like on the tutorial.

But when I try to run the extension I get

EDIT

import 'babel-polyfill';
import React from 'react';
import {render} from 'react-dom';
import {Router, browserHistory} from 'react-router';
import routes from './routes';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './assets/sass/main.scss';
import '../node_modules/font-awesome/css/font-awesome.css';

import {loadCourses} from './actions/courseActions';
import {loadAuthors} from './actions/authorActions';
import {Provider} from 'react-redux';
import configureStore from './store/configureStore';

const store = configureStore();
store.dispatch(loadCourses());
store.dispatch(loadAuthors());

render(
  <Provider store={store}><Router history={browserHistory} routes={routes}/></Provider>, document.getElementById("app")
);

Any advice?

While this is certainly on topic on SO, I'm not sure it's on topic in [tag:google-chrome-extension].. (since that's not for questions that simply relate to extensions, but questions about extension **development**) — Xan, May 30 '16 at 13:27
Could you also add the part of the code where you create the store and pass it to the provider? — larrydahooster, May 30 '16 at 15:58
Thanks for updating. Looks okay for me. Sorry can't help out there :( — larrydahooster, May 30 '16 at 20:38

score 39 · Accepted Answer · answered May 31 '16 at 06:55

I've got the solution from here.

The right code is :

import {createStore, applyMiddleware, compose} from 'redux';
import rootReducer from '../reducers/index';
import thunk from 'redux-thunk';

export default function configureStore(initialState){
  return createStore(
    rootReducer,
    initialState,
    compose(
      applyMiddleware(thunk),
      window.devToolsExtension ? window.devToolsExtension() : f => f
    )
  );
}

score 19 · Answer 2 · answered Oct 15 '17 at 18:02

19

Ok, just checking the official repository of the Redux Dev Tools I found they recommend to use __REDUX_DEVTOOLS_EXTENSION__ instead of devToolsExtension as you are using.

So after just this update my code and de connectino with the plugin start working like a charm.

Here a sample code if it helps anyone:

const enhancers = compose(
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );

const store = createStore(
  rootReducer,
  defaultState,
  enhancers
);

answered Oct 15 '17 at 18:02

robertovg

1,018
11
16

2

Thank you @robertovg. I was getting error mentioning, compose not defined. To solved we need to import from redux. Example : import { createStore, compose } from 'redux'; – Johnson Samuel Mar 30 '18 at 15:49

score 3 · Answer 3 · answered May 05 '17 at 15:38

There is a simpler solution now from the redux-devtools folks. See:

section 1.3 Use redux-devtools-extension package from npm at https://github.com/zalmoxisus/redux-devtools-extension

basically, if you npm install there redux-devtools-extension you can:

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

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

In my case I only have one piece of middleware (redux-thunk) but I have an initialState so it looks like this:

const store = createStore(reducer, initalState, composeWithDevTools(applyMiddleware(thunk)))
store.subscribe(() => console.log("current store: ", JSON.stringify(store.getState(), null, 4)))

Why is store.subscribe relevant, that is not in the redux-devtools-extension docs. — raarts, Jun 08 '17 at 21:13

score 2 · Answer 4 · answered Dec 08 '20 at 11:05

2

For anyone that none of these worked for, try restarting your server. I had tried for a while and then decided to restart my server. That solved it for me

answered Dec 08 '20 at 11:05

chummypixels

81
7

1

Was the solution... Easy but took some times to realize ! Thanks you ! – TGuerin Aug 18 '21 at 12:11

score 1 · Answer 5 · answered Apr 06 '21 at 12:58

As it is given in the original repository https://github.com/zalmoxisus/redux-devtools-extension, you must import compose as a named import and run this compose method by adding the applyMiddleware method as an input;

import { createStore, applyMiddleware, compose } from 'redux';
...
...
+ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+ const store = createStore(reducer, /* preloadedState, */ wcomposeEnhancers(
    applyMiddleware(...middleware)
));

score 0 · Answer 6 · answered Oct 24 '19 at 03:32

If anyone followed the same (or similar) boilerplate server-side rendering React app setup that I did, you may want to be sure if there are separate server and client files that use createStore(). In my case there were, and I spent a lot of time playing with the server file, when it needed to go into the client file.

Probably not the best way to do it, but alas, the boilerplate code I used did it that way.

Domenico Zinzi · Answer 7 · 2020-05-02T14:44:36.050

0

I write a simple solution in the hope that it will be useful (It is not a definitive solution):

I have to right click on Redux Devtools Extension
Open Remote DevTools
Then change the Settings to use the custom server which is localhost:3000

And it works

edited May 02 '20 at 14:44

answered May 02 '20 at 14:05

Domenico Zinzi

954
10
18

score -2 · Answer 8 · answered Feb 26 '19 at 12:58

-2

I am late but may help someone, my solution was to use connect the component

import {connect} from 'react-redux'
...
class MyComponent extends Cmponent{
...
}
export default connect()(MyComponent)

answered Feb 26 '19 at 12:58

Mujtaba Zaidi

629
1
6
14

"No store found" when using Redux chrome extension

8 Answers8

Linked