2

このコードは、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 を含めるようにこれを書き直す方法はわかりませんが、DevTools を含めるためのプル リクエストを含むこのGitHub リンクを見つけました。ただし、それがどのように適用され、let 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 documentationからの次の構文とは対照的に、構文は私を混乱させます。

initialState はどうなりますか? このでは、どこにも参照がありませんinitialState

4

1 に答える 1

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);
于 2016-06-01T18:07:39.353 に答える