使用中间件将redux开发工具传递到redux存储

与redux devtools文档中的编写方式相关，如何处理

我不知道如何重写它以包含DevTools，但我确实找到了GitHub链接，其中包含一个包含DevTools的pull请求，我已经开始工作了。然而，我仍然不明白它是如何应用的，以及让something=function（param1，param2）（function）发生了什么。我知道，使用该语法，

applyMiddleware

的返回值将被发送到

createStore

，但是

createStore

语法使用了一个减缩器、initialState和一个增强器。这在这里是如何应用的

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'导入{createDevTools}
从“redux devtools日志监视器”导入日志监视器
从“redux devtools dock monitor”导入DockMonitor
const DevTools=createDevTools(
)
让createStoreWithMiddleware=applyMiddleware（thunkMiddleware，api）（createStore）
let store=createStoreWithMiddleware（QuoteApp，DevTools.instrument（））

该语法使我感到困惑，而不是来自

---

initialState会发生什么？在中，任何地方都没有对

initialState

的引用。

商店增强器定义签名大致如下（从“applyMiddleware”的定义中剪下）：

因此，增强器定义实际上返回一个引用

createStore

函数本身的函数

不幸的是，不知何故，人们似乎从某处复制了这种非常面向功能的调用模式，这真的很难理解。不确定它是否在文档的早期版本中，或者是什么。请注意，特定的使用模式不允许定义

initialState

（或者，在即将重命名时，

preloedstate

）

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

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

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

---

太好了，这更有意义。谢谢合成函数呢？为什么在不可读的示例中它不是必需的？看来我对initialState的看法是对的，没有必要这样做，因为这个例子是一个身份验证的例子，当你第一次点击应用程序时，你还没有登录，所以没有理由使用initialState，这可能就是为什么这个例子是用奇怪的函数表示法编写的。这些假设是否正确？增强器函数签名将“旧”增强器作为参数（示例的

DevTools.instrument（）

部分）。所以，这里不需要作曲。至于

initialState

——实际上，如果

createStore（）

只有两个参数，Redux会检查第二个参数是函数还是对象。如果它是一个对象，它必须是

initialState

。如果它是一个函数，那么它必须是一个增强子。因此，

createStoreWithMiddleware

调用可以采用

initialState

，它只是没有被传入。本视频介绍了如何将redux devtool连接到基本react redux应用程序-

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

        return {
            ...store,
            dispatch
        }
    }
}

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

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