将 redux-devtools 传递给带有中间件的 redux 存储

Posted 2023-03-05

【中文标题】将 redux-devtools 传递给带有中间件的 redux 存储

【英文标题】：Passing in redux-devtools to a redux store with middleware

【发布时间】：2016-10-01 05:37:13

【问题描述】：

相对于 redux-devtools 文档中的编写方式，this code 是如何处理的？

https://github.com/auth0-blog/redux-auth/blob/master/index.js#L10-L12

let createStoreWithMiddleware = applyMiddleware(thunkMiddleware, api)(createStore)

let store = createStoreWithMiddleware(quotesApp)

我不确定如何重写它以包含 DevTools，但我确实找到了 this GitHub 链接，其中包含一个包含 DevTools 的拉取请求，我已经开始使用它了。但是，我仍然不明白它是如何应用的以及let something = function(param1,param2)(function) 发生了什么。我知道使用该语法，applyMiddleware 的返回值被发送到createStore，但createStore 语法需要一个reducer、initialState 和一个enhancer。这是如何在这里应用的？

import  createDevTools  from 'redux-devtools'
import LogMonitor from 'redux-devtools-log-monitor'
import DockMonitor from 'redux-devtools-dock-monitor'

const DevTools = createDevTools(
  <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q">
    <LogMonitor theme="tomorrow" preserveScrollTop=false />
  </DockMonitor>
)

let createStoreWithMiddleware = applyMiddleware(thunkMiddleware, api)(createStore)

let store = createStoreWithMiddleware(quotesApp, DevTools.instrument())

与redux-devtools documentation 中的以下语法相比，该语法让我感到困惑。

initialState 会发生什么？在the example 中，任何地方都没有对initialState 的引用。

【问题讨论】：

这个视频解释了如何将 redux devtool 连接到基本的 react redux 应用 - youtu.be/TSOVLXQPWgA

【参考方案1】：

商店增强器定义签名大致如下（从`applyMiddleware的定义中截取）：

export default function applyMiddleware(...middlewares) 
    return (createStore) => (reducer, preloadedState, enhancer) => 
        // snip actual enhancer logic

        return 
            ...store,
            dispatch
        
    

因此，增强器定义实际上返回了一个函数，该函数引用了createStore 函数本身。

不幸的是，不知何故，人们似乎从某个地方复制了这种非常面向函数的调用模式，这真的很难理解。不确定它是否在文档的早期版本中，或者什么。请注意，特定的使用模式不允许定义initialState（或者，因为它即将被重命名，所以preloadedState）。

所以是的，当前的定义模式，我认为更多更具可读性的是：

const middlewares = [thunk, myMiddleware];
const middlewareEnhancer = applyMiddleware(...middlewares);
const enhancers = compose(middlewareEnhancer, someOtherEnhancer);

const store = createStore(reducer, preloadedState, enhancers);

【讨论】：

太好了，这更有意义。谢谢。撰写功能呢？为什么在不可读的示例中没有必要？所以看起来我对 initialState 的看法是正确的，不需要它，因为这个示例是一个身份验证示例，当你第一次点击应用程序时，你没有登录，所以 initialState 真的没有理由，因此可能是这个示例的原因是用那个奇怪的函数符号编码的。这些假设是否正确？

增强器函数签名将“旧”增强器作为参数（样本的DevTools.instrument() 部分）。所以，那里不需要 compose。至于initialState——实际上，如果createStore() 只有两个参数，Redux 会检查第二个参数是函数还是对象。如果它是一个对象，它必须是initialState。如果它是一个函数，它必须是一个增强器。所以，createStoreWithMiddleware 调用 可以 获取 initialState，只是没有被传入。