react-redux

3241 ワード
batch hooks provider connect() connectAdvanced() react redux テキストリンク
react-redux
  • Provider

    • cf. redux order
    1.イベント発生->
    2.action作成関数を使用してactionを生成しstoreに送信する(要求処理)->
    3.actionを受け取ったstore指示reduce分析とaction(実行/order)->
    4.ステータスを変更すると、リンクされたコンポーネントの値が変更され、レンダリングがトリガーされます.
    Reduxから購読

  • storeのステータスが変化したときに動作するコンポーネントを指定するロールです.
    reduxからのスケジュール

  • イベントが発生すると、コンポーネントによって要求されたアクションが生成され、リポジトリで実行されたロールに渡されます.
  • createStoreをapplyMiddleware囲むと、ミドルウェアはactionを中間処理して「非同期action」を送信する.

  • デフォルトでは、reduxにはミドルウェアは含まれていません.redux-thunkまたはredux-promiseをインストールして使用する必要があります.
    • ここまで、Reduxミドルウェアに移動します

    react-redux


    Why we use react-redux?


  • React Reduxは、React用の正式なRedux UIバインドライブラリです.

  • ReduxとReactを同時に使用する場合は、React Reduxを使用して2つのライブラリをバインドする必要があります.

    • Provider

  • Provicer要素は、redox storeにアクセスする必要があるネストされたすべての要素に対して、redoxのstoreを使用することを許可する.

  • react-reduxのすべてのストレージに接続できるため、ほとんどのアプリケーションは<Provider>コンポーネントをアプリケーションコンポーネント全体の最上位レベルにレンダリングします.

  • これにより、hooksとconnect APIは、提供されたstoreにアクセスできます.

    • Providerの支柱

  • store
  • children
  • context 
    • 
ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root'),
);

    Hooks (useSelector / useDispatch)


    1.useSelector


    :selector関数を使用してstoreからデータを抽出できます.
  • connect関数なしでRedux storeでstateを問い合わせる.
    • 毎日30秒⏱ ページ下部かどうかを判断
    TIL 04. Javascript basic