让 Redux DevTools 工作 [英] Getting Redux DevTools To Work

问题描述

我遵循了教程，但是，我收到控制台错误:

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

这是我的(相关)配置:

WEBPACK.CONFIG.JS:

<代码>...const TARGET = process.env.npm_lifecycle_event;process.env.BABEL_ENV = 目标；...if( 目标 === "开始" || !TARGET ) {module.exports = 合并(通用，{开发工具:内联源映射"，开发服务器:{contentBase : PATHS.build,热:真的，进度:真的，统计信息:仅限错误"},插件:[新的 webpack.HotModuleReplacementPlugin(),新的 webpack.DefinePlugin({process.env.NODE_ENV":JSON.stringify(生产")})]});}

INDEX.JS:

从react"导入React；从react-dom"导入{渲染}；从react-redux"导入{提供者}；从./modcon/ConfigureStore.js"导入configureStore；从./component/Main.jsx"导入主接口；从./component/devTools/DevTools.js"导入开发工具；导出 const store = configureStore();让初始化 = () =>{使成为(<提供者商店={商店}><div><主界面/><开发工具/>

</提供者>,);};初始化()；

CONFIGURESTORE.JS:

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

CONFIGURESTORE.DEV.JS:

import { createStore, applyMiddleware, compose } from "redux";从./Reducers.js"导入reducer；从../component/devTools/DevTools"导入 DevTools；const 增强器 = compose(DevTools.instrument());导出默认函数 configureStore( initialState ) {const store = createStore(reducer,initialState,enhancer);console.log(module.hot);如果(模块.热){module.hot.accept("./Reducers", () =>store.replaceReducer(require("./Reducers")/*.default 如果你使用 Babel 6+ */));}退货商店；}

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

解决方案

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

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

示例:

const finalCreateStore = compose(window.devToolsExtension ?window.devToolsExtension() : f =>F)(创建商店)

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

解决方案

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)

这篇关于让 Redux DevTools 工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！