グローバル状態管理Redux

Reduxの使い方を理解する前に、なぜReduxを使うのかを理解してください.

Data Binding

データバインドとは、ビュー(画面)をモデル(データ)に関連付けることです.
バニラJSはデータをバインドできますか?簡単なカウンタを実装しましょう.

const counter = document.querySelector('#counter'); // view
const plus = document.querySelector('#plus');
const minus = document.querySelector('#minus');

let count = 0;

const increase = () => {
  count++;
}

const decrease = () => {
  count--;
}

plus.addEventListener('click', increase);
minus.addEventListener('click', decrease);

データcountはボタンのクリックによって変化しますが、これは画面に影響を与えることなくデータを変更するだけです.
画面に適用するには、個別のupdate関数が必要です.
これらのJavaScriptにはデータがバインドされていません.
反応はどうなりますか?

function Component(props) {
  const [count, setCount] = setState(0);
  
  return (
    <div>{count}</div>
  )
}

ステータスを変更すると、変更されたJSXが表示されます.
データはスクリーンにバインドされます.

一方向

データバインドはまったく同じではありません.
Reactのデータバインドは一方向です.ストリームはデータからビューにのみ適用されます.

const [input,setInput] = useState('');

return (
  <input value={input} onChange={e => setInput(e.target.value)}/>
)

Inputに書き込むと、入力に伴ってデータは変更されません.
これは、データを入力値に変更し、変更したデータをビューに表示する理由です.
vueやangleなどのフレームワークは双方向バインドをサポートします.
ビューで変更を行うと、データも変更されます.

Fluxモード

MVCモードは昔からよく使われています.
コントローラが処理する「アクション」(Action)は、変更したモデルをViewに送信します.
ただし、1つのモデルは複数のデータで使用されるか、1つのビューで複数のモデルが使用されます.
開発規模が大きいほど、発生する状況が多くなります.

接続モデルとビューの複雑さが増大し、結果を予測するために複雑なデータストリームを作成することも困難になります.
FluxモードはFacebookで紹介されているアーキテクチャです.
MVCモードではなく開発時間が長く、より大きく、メンテナンスが容易であるという新しいモデルを提案した.
Fluxモードは、一方向データストリームを中心としています.

ユーザがアクションを発行すると、アクションに影響を与えるすべてのビューがリフレッシュされます.
そのため、何が起こるか予想できます.(複雑にならない)
この2つのパターンに対する経験が少ないため,それらの違いと利点を理解することは困難である.
これは一方向であり、モデルが変更されると、モデルを使用するビューが更新されることが重要です.
冗長性はFluxモードベースのライブラリです.

Redux

なぜRidexを使うのですか?

冗長性は、ステータスを管理するためのライブラリです.
以上のように、Vanilla JSにはバインドデータがありません.
reduceが有効になっている場合は、手動で更新する必要はありません.
変更を購読して、すべてのビューを変更できます.
どのアプリケーションでもグローバルに使用するデータが必要です.
Reactは簡単なUIライブラリであるため、データ管理は考慮されません.
1つのデータは複数の構成部品から取得する必要があります.
サブアセンブリ内の遠い構成部品にデータを渡すには、propsを介してデータを複数回転送する必要があります.

冗長性により、図に示すように、グローバルで使用されるデータを効率的に管理できます.
reduceを使用する前にreactのstateを複数の場所で使用する場合はpropsを移動する必要があります.
多くのコードが表示されます.

Redux Intro

Store:ステータス管理コンテナ(リポジトリ).

動作:状態変化を引き起こす動作情報.Pure Object.

Dispatcher:Actionステータスが更新されます.

ビュー:ステータス変更が画面に反映されます.

n/a.原則

アプリケーションにはstoreが必要です.
つまり、すべてのステータス値を1つのオブジェクトとして表す必要があります.

state値は読み取りにのみ使用されます.
Reactのstateのように直接値を変更することはできません.
ビューでは、ストリームに基づいてstateを変更して、必要なステータスを反映する必要があります.

stateは純関数でのみ変更できます.
純関数とは、同じ入力時に常に同じ出力を返す関数です.
この状態を変更する関数はreduceと呼ばれ、reduceだけが状態を変更する必要があります.(読み取り専用)