反応アプリケーションのためのReduxとそのミドルウェアの概観

このポストでは、reduxがどのように動作し、そのコアコンセプト、原則、およびパターンをreduxを使用するために見ていきます.これは、主に例ではなく深さの概念を理解することに焦点を当てます.
何がreduxですか?
Reduxは、アプリケーションの状態を管理し、更新するためのパターンとライブラリです.それは国家が予測可能なファッションで更新されることができることを確実としているあなたのアプリケーション全体で使われる必要がある州のための集中した店として用いられます.
私はいつreduxを使用する必要がありますか?
Reduxはより便利です.

は、アプリケーション

の多くの場所で必要とされる大量のアプリケーション状態を持っています

アプリ状態は、時間

の間、頻繁に更新されます

その状態を更新するためのロジックは、複雑な

であり得る

アプリは、媒体または大規模なコードベースを持っており、多くの人々によって処理される可能性があります

これらすべてを深く理解するために、小さな例を挙げましょう

function Counter() {
  // State: a counter value
  const [counter, setCounter] = useState(0)

  // Action: code that causes an update to the state when something happens
  const increment = () => {
    setCounter(prevCounter => prevCounter + 1)
  }

  // View: the UI definition
  return (
    <div>
      Value: {counter} <button onClick={increment}>Increment</button>
    </div>
  )
}

これは一方向データフローの小さな例です

州は、

の特定の時点でアプリの状態を記述します

UIは、その状態

に基づいてレンダリングされる
何かが起こる(ボタンをクリックしているユーザーのような)ときに、状態は号で起こったことに基づいて更新される

UIは、新しい州

に基づきます

アプリケーションがこの方法を維持するにつれて、データフローパターンは非常に複雑になります.
この問題を解決する一つの方法は、親から子要素への小道具を渡すことです.
したがって、この問題を解決するために最善の方法は集中しているストアを持っていることです.
Thatsものすごい儀式、子供からすべての親から小道具を渡す必要はありません.
これはReduxの背後にある基本的な考え方です:あなたのアプリケーションのグローバル状態を含む単一の集中した場所と、その状態を更新するときにコードが予測できるようにする特定のパターンです.
Redux用語:
アクション
アクションは型フィールドを持つプレーンJavaScriptオブジェクトです.アプリケーションで起こったことを記述するイベントとしてアクションを考えることができます.
還元剤
還元子は、現在の状態とアクションオブジェクトを受け取る関数で、状態とアクション引数に基づいて新しい状態値を計算します
受信者は、受信したアクション(イベント)型に基づいてイベントを処理するイベントリスナーとして考えることができます.
ストア
すべてのReduxアプリケーションの状態は、オブジェクトと呼ばれるストア内の生活.
ストアは、還元器で渡すことによって作成することができます、それはメソッドストアを持っています.getstate ()現在の状態値を返す
ディスパッチ
ReduxストアにはDispatchと呼ばれるメソッドがあります.状態を更新する唯一の方法は、ストアを呼び出すことです.dispatch ()とアクションオブジェクトを渡します.ストアは還元機能を実行し、新しい状態値を内部に保存し、getstate ()を呼び出して更新された値を取得できます
コアの概念と原則
真実の単一の源
アプリケーションのグローバル状態は、単一のストア内のオブジェクトとして格納されます.データのどんな与えられた部分も、多くの場所で複製されるのではなく、1つの場所に存在するべきです.
状態は読み込み専用です
状態を変更する唯一の方法は、何が起こったかを記述するオブジェクト、アクションを派遣することです.
Reduxアプリケーションデータフロー
以前に、我々は「ワンウェイデータフロー」について話しました.
Reduxは“一方向のデータフロー”アプリケーションの構造を使用して

州は、

の特定の時点でアプリの状態を記述します

UIは、その状態

に基づいてレンダリングされる
何かが起こる(ボタンをクリックしているユーザーのような)ときに、状態は号で起こったことに基づいて更新される

UIは、新しい州

に基づきます
特にreduxでは、これらのステップをより詳細に分解することができます.
初期設定

Redux店は、ルート減速剤機能

を使用してつくられる

ストアは一旦ルート減速剤を呼び出し、戻り値を初期状態

として保存する

UIが最初にレンダリングされると、UIコンポーネントはReduxストアの現在の状態にアクセスし、そのデータを使用して何を表示するかを決定します.彼らはまた、状態が変更されているかどうかを知ることができるように、将来のストアの更新を購読する.

更新

何かは、ボタン

をクリックしているユーザーのようなアプリケーションで起こります

アプリケーションコードはREDUXストアのアクションをディスパッチします.

ストアは、前の状態と現在のアクションで再び還元機能を実行し、戻り値を新しい状態

として保存します

店は、ストアが

を更新されたことを予約されるUIのすべての部分に通知します

ストアチェックからデータを必要とする各UIコンポーネントは、必要な状態の部品が変更されたかどうかを確認します.

そのデータを見る各構成要素は、新しいデータで再レンダリングを強制するので、画面

に示されているものを更新することができます
データフローが視覚的に見えるものは以下の通りです.

USELELETERとのストアからの読み取り状態
私たちはどうにか、私たちのコンポーネント、useselectorフックにストアデータを得ることができるはずです.
しかし、我々が行動を派遣するならば、何が起こるか、RedUx状態は減速者によって更新されるでしょう、しかし、我々のコンポーネントは何かが変わったということを知っていなければならないように、それはデータの新しいリストで再レンダリングすることができます.
幸いにも、USElectorは自動的に私たちのためのreduxストアに購読!そのようにして、アクションが送られるときはいつでも、それはすぐにそのセレクタ機能を呼ぶでしょう.
を使用します.
上記の行は、ResourceShootsを使用してResponseのReduxストアからデータを読み取る方法を示します.
を使用したアクションのディスパッチ
Reduxストアからデータを読む方法を知っています.しかし、どのように、我々は成分から店に行動を派遣することができますか?我々は反応の外で、我々は店を呼び出すことができます知っている.派遣する.コンポーネントファイル内のストアにアクセスできないので、コンポーネント内で自分自身でディスパッチ機能へのアクセスを得る方法が必要です.
Rescux UseDispatchフックは、その結果としてストアのディスパッチメソッドを与えます.
したがって、我々はconst dispatch = usedispatch ()をコールすることができます.
ミドルウェアとは何かRedUxでなぜ必要か
私たちが見たように、Redux StoreはASYCNロジックを知りません.
そして、reduxは副作用を決して含んではいけません、「副作用」は機能から値を返すの外で見ることができる状態またはふるまいへのどんな変化でもあります.いくつかの一般的な副作用は以下のようなものです.

コンソール

に値を記録する
ファイルを保存する
非同期タイマを設定する

AJax HTTPリクエスト

を作る

任意の本当のアプリはどこかの物事のこれらの種類を行う必要があります.それで、我々が還元剤に副作用を置くことができないならば、どこで我々を置くことができますか?
コンポーネント自体で簡単にこれを行うことができると言う人もいますが、他のコンポーネントでも同じロジックを使わなければならない場合は、そのコンポーネントのロジックを複製しなければなりません.
そして、もう一つの理由は、コンポーネントに非同期ロジック/複雑なロジックを書くべきではない
それで、それは変化して、維持するのがずっと簡単です.
したがって、もし我々の非同期ロジックをJSXコンポーネントの外部に保つなら、既存のreduxパターンでは不可能です
非同期操作が完了するまで待つことができないので、Async演算子を処理するために独自のミドルウェアロジックを書くことができます.
しかし、なぜ私たちはすでに副作用のロジックを書くことを有効にするミドルウェアを持っているときにカスタムロジックを記述する.
Reduxミドルウェアは、副作用を持ってロジックを書くことを有効にするように設計されました.
“副作用”は、AJAXの呼び出しのように関数の外部の状態/動作を変更したり、関数の引数を変更したり、ランダムな値を生成するコードです.
ミドルウェアは標準的なreduxデータフローに余分なステップを加えます.
我々はAppのコードをReduxストアにアクションを派遣知っている.
ミドルウェアでは、アクションをディスパッチした後、最初はミドルウェアを経由して還元器に入ります.
redux asyncデータフロー:
通常のアクションと同じように、まずボタンをクリックするなど、アプリケーションでユーザーイベントを処理する必要があります.次に、dispatch ()を呼び出し、何かを渡します.これは、平文オブジェクト、関数、あるいはミドルウェアが探すことができる他の値であるかどうかです.
その値がmiddlewareに達すると、それは非同期呼び出しをすることができて、次に、非同期呼び出しが完了するとき、本当の行動オブジェクトを派遣することができます.

アクションクリエイターズ

Action Creatorはアクションオブジェクトを作成して返す関数です.我々は通常、我々は毎回手でアクションオブジェクトを書く必要はありませんので、これらを使用します.

アクションCreator関数は、準備アクションオブジェクトとthunksをカプセル化します.

アクションクリエイターは、引数を受け取り、セットアップロジックを含むことができます.

出典:(https://redux.js.org/)