Getting Redux DevTools To Work

问题

I followed the tutorial, however, am getting the console error:

"Error : Expected the reducer to be a function"

Here is my ( relevant ) configuration:

WEBPACK.CONFIG.JS:

...
const TARGET = process.env.npm_lifecycle_event;
process.env.BABEL_ENV = TARGET;
...
if( TARGET === "start" || !TARGET ) {
    module.exports = merge( common, {
        devtool : "inline-source-map",
        devServer : {
            contentBase : PATHS.build,
            hot : true,
            progress : true,
            stats : "errors-only"
        },
        plugins : [
            new webpack.HotModuleReplacementPlugin(),
            new webpack.DefinePlugin({
                "process.env.NODE_ENV" : JSON.stringify( "production" )
            })
        ]
    } );
}

INDEX.JS:

import React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import configureStore from "./modcon/ConfigureStore.js";
import MainInterface from "./component/Main.jsx";
import DevTools from "./component/devTools/DevTools.js";

export const store = configureStore();

let initialise = () => {
    render(
        <Provider store = { store }>
            <div>
                <MainInterface />
                <DevTools />                
            </div>
        </Provider>,
    );
};
initialise();

CONFIGURESTORE.JS:

if (process.env.NODE_ENV === "production") {
    module.exports = require("./ConfigureStore.prod");
} else {
    module.exports = require("./ConfigureStore.dev");
}

CONFIGURESTORE.DEV.JS:

import { createStore, applyMiddleware, compose } from "redux";
import reducer from "./Reducers.js";
import DevTools from "../component/devTools/DevTools";

const enhancer = compose(
    DevTools.instrument()
);

export default function configureStore( initialState ) {
    const store = createStore( reducer, initialState, enhancer );
    console.log( module.hot );
    if (module.hot) {
        module.hot.accept("./Reducers", () =>
        store.replaceReducer(require("./Reducers")/*.default if you use Babel 6+ */));
    }
    return store;
}

Im not clear on what I am doing wrong. Thanks

回答1:

Having a redux dev tools log monitor over my page was a little bit frustrating. So I found an chrome plugin called Redux DevTools.

All all you need to start using it is simply install this plugin and modify redux's createStore using compose function.

Example:

const finalCreateStore = compose(
  window.devToolsExtension ? window.devToolsExtension() : f => f
)(createStore)

回答2:

I had the same issue and below code works for me.

const enhancers = compose(
  window.devToolsExtension ? window.devToolsExtension() : f => f
);
const store = createStore(rootReducer, defaultState, enhancers);

回答3:

if you need both thunk and redux devtools:

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
...
<Provider store={createStore(allReducers, composeEnhancers(applyMiddleware(...['thunk'])))}>
...

来源：https://stackoverflow.com/questions/37298559/getting-redux-devtools-to-work

标签

javascript

reactjs

redux

middleware

redux-devtools