深さはReduxアプリMiddleWareの原理を分析して、仲間は午後を見て、髪の毛は多く落ちました.

1385 ワード

reduxのプログラミングの過程で、どうしても中間部品を使って、reducerは純関数だと思って、その中でいくつかの副作用があることをしてはいけません.そこで倉庫storeを作成する時にcreateStoreに第二のパラメータがあります.
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の簡単な実現原理です.単価が読めば、自分に役に立つと思います.ボタン三連を忘れないでください.ありがとうございます.