让 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屋!