深さはReduxアプリMiddleWareの原理を分析して、仲間は午後を見て、髪の毛は多く落ちました.
1385 ワード
reduxのプログラミングの過程で、どうしても中間部品を使って、reducerは純関数だと思って、その中でいくつかの副作用があることをしてはいけません.そこで倉庫storeを作成する時にcreateStoreに第二のパラメータがあります.
まず、appyMiddleWareで受け入れられたパラメータは、中間価格例えばthunk、sagaなどの彼の戻り値の公式定義がenhancer関数であるということですが、問題はenhancer関数とは何ですか?この関数はパラメータcreateStoreを受信し、彼の戻り値もcreateStoreのような関数です.つまり、彼の戻り値も新しい「store」「本当はappyMiddleWareの本質は新しいdispachを返して新しいstoreに戻ります.
const store=createStore(reducer,applyMiddleWare( ))
中間部品の実行原理に注目したことがありますか?私達は自分で簡単な中間部品のメカニズムを実現できますか?話は多くなくて、直接コードをつけて、コードの中で多くの備考をプラスして、みんながすべて見てわかることができることを確保することができます.まず、appyMiddleWareで受け入れられたパラメータは、中間価格例えばthunk、sagaなどの彼の戻り値の公式定義がenhancer関数であるということですが、問題はenhancer関数とは何ですか?この関数はパラメータcreateStoreを受信し、彼の戻り値もcreateStoreのような関数です.つまり、彼の戻り値も新しい「store」「本当はappyMiddleWareの本質は新しいdispachを返して新しいstoreに戻ります.
function applyMiddleWare(middleware) {
// enhancer createStore newCreateStore
function enhancer (createStore) {
// createStore
function newCreateStore(reducer) {
// , store
const store =createStore(reducer)
// store , , dispat , dispaatch
const func=middleware(store)
// dispatch
const {dispatch}=store
// dispatch
const newDispatch =func(dispatch);
// dispath store
return {...store,dispatch:newDispatch}
// store.dispatch , , dispatch(action) reducer ( !!!)
}
return newCreateStore
}
return enhancer
}
これはappyMiddlewareの簡単な実現原理です.単価が読めば、自分に役に立つと思います.ボタン三連を忘れないでください.ありがとうございます.