2017-12-18 21 views
0
const store = createStore(
    rootReducer, 
    initialState, 
    compose(
     applyMiddleware(thunk, api, wsMiddleware, createLogger()), 
     typeof window === 'object' && typeof window.devToolsExtension !== 
'undefined' 
     ? window.devToolsExtension() 
     : DevTools.instrument(), 
    ), 
); 

したがって、上記のは、あなたが通常のストアを作成し、その後、あなたはこのように始まり、あなたのミドルウェアを持っているかです。 org、しかし、誰もそれについて私にそれについて説明することができます何が起こっている?Reduxのミドルウェア理解指導

ミドルウェアは店舗を受け取りますか?ストアから次の関数を呼び出して、最後にアクションとして与えられたパラメータ(この場合)を使用することよりも、 ?

答えて

1

...

store => {...}

ストアAPIは、パイプラインに与えられた最初の引数です。これにより、ミドルウェアは、パイプラインの任意の時点で現在の状態を取得したり、新しいアクションをストアにディスパッチしたりすることができます。

注:は、createStore関数から返されるストアと同じ特性を多く持ちますが、同じではありません。 dispatchおよびgetState機能のみが使用可能です。

next => {...}

next引数は、チェーン内の次のミドルウェアへの参照です。移動するミドルウェアがそれ以上存在しない場合、ストアはアクションを処理する(すなわち、それをリデューサに渡す)。

nextが呼び出されていない場合、アクションはレデューサーには適用されません。これは、Reduxが処理しようとするとエラーが発生するため、関数や約束など、それ自身で有効なアクションではないものを抑制するのに便利です。

action => {...}

action引数は、店に派遣しますものです。

{...}

ここであなたは、あなたがそれで、あなたはnextハンドラにそれを渡すかどうかをやりたい何か特別なものがあるかどうかを確認するためにactionをテストする場所です。

この例では、我々はそれがパイプラインの各部分をどのように使用するかを説明する、単純化されたthunk middlewareを作成します。

export default store => next => action => { 

    // if the action is a function, treat it as a thunk 
    if (typeof action === 'function') { 

    // give the store's dispatch and getState function to the thunk 
    // we want any actions dispatched by the thunk to go through the 
    // whole pipeline, so we use the store API dispatch instead of next 
    return action(store.dispatch, store.getState) 
    } else { 

    // we're not handling it, so let the next handler have a go 
    return next(action) 
    } 
} 
+0

ありがとうございました! @マイケル!!あなたはそれをもっとはっきりさせました – DarkArtistry

0

ReduxミドルウェアAPIに準拠する関数。各ミドルウェアは、ストアのディスパッチおよびgetState関数を名前付き引数として受け取り、関数を返します。その機能には次のミドルウェアのディスパッチ方法が与えられ、潜在的に異なる議論を伴う、または別の時間に、あるいはそれを全く呼び出さない行動next関数を返すことが期待される。チェーン内の最後のミドルウェアは、次のパラメータとして実店のディスパッチメソッドを受け取り、チェーンを終了します。したがって、ミドルウェアの署名は({getState、dispatch})=> next =>アクションです。

答えは、applymiddlewareのマニュアルに記載されています。 https://redux.js.org/docs/api/applyMiddleware.html Reduxのミドルウェアパイプラインは次のように分けることができ

関連する問題