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?
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).
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
)
);
}
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
);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With