让 Redux DevTools 工作

Question

我遵循了 tutorial，但是，我收到控制台错误：

"错误：预计减速器是一个函数"

这是我的（相关）配置：

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

我不清楚我做错了什么。谢谢

Answer 1

在我的页面上安装 redux 开发工具日志监视器有点令人沮丧。所以我找到了一个名为 Redux DevTools 的 chrome 插件。

开始使用它所需要做的就是安装这个插件并使用 compose 函数修改 redux 的 createStore。

示例：

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

Answer 2

我遇到了同样的问题，下面的代码对我有用。

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

Answer 3

如果你同时需要 thunk 和 redux devtools:

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

让 Redux DevTools 工作

Getting Redux DevTools To Work

javascript

middleware

reactjs

redux

redux-devtools