Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

"No store found" when using Redux chrome extension

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

enter image description here

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?

like image 959
Boky Avatar asked May 30 '16 13:05

Boky


People also ask

How do I see Redux in Chrome?

From the navigation bar within the Chrome developer tools, you can find the Redux DevTools by selecting the new Redux panel, made available by the Redux DevTools Chrome extension (figure 3.5).


2 Answers

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
    )
  );
}
like image 78
Boky Avatar answered Oct 08 '22 20:10

Boky


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
);
like image 44
robertovg Avatar answered Oct 08 '22 19:10

robertovg