让 Redux DevTools 工作

Posted 2023-02-19

【中文标题】让 Redux DevTools 工作

【英文标题】：Getting Redux DevTools To Work

【发布时间】：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;

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

【参考方案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'])))>
...