Question

this code如何处理与redux-devtools文档中的编写方式有关？

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和增强器。这是如何应用的？

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的引用。

Answer 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);

使用中间件将redux-devtools传递到redux存储区

1 个答案: