让 Redux DevTools 工作答案

【问题标题】：Getting Redux DevTools To Work让 Redux DevTools 工作
【发布时间】：2016-09-14 21:04:19
【问题描述】：

我关注了tutorial，但是，我得到了控制台错误：

"错误：期望 reducer 是一个函数"

这是我的（相关）配置：

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

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

【问题讨论】：

标签： javascript reactjs redux middleware redux-devtools

【解决方案1】：

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

您只需安装此插件并使用 compose 函数修改 redux 的 createStore 即可开始使用它。

例子：

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

【讨论】：

谢谢，能不能解释一下f => f，那个函数的作用是什么？
@Kayote 目的是在没有devToolsExtension的情况下有一个默认功能。所以这个f => f 函数只是延续了redux中间件链。
这个视频解释了如何将 devtool 连接到 react redux 应用 - youtu.be/TSOVLXQPWgA

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

如果你需要 thunk 和 redux 开发工具：

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

【讨论】：