React # Redux

📝今日習った内容

reactを使用してプロジェクトを作成すると、プロジェクトの規模が大きくなり、サブプロジェクトに移行するpropsの深さも深くなります.そうなると、コードも効率的ではなく、メンテナンスの観点から不便をもたらすのは当然です.目的のstateステータスをどこででも使用できるライブラリがあります.それがReduxです.
ReduxはReactのライブラリではなく、他の場所で使用できるステータス管理ライブラリです.

Reduxの基本概念:3つの原則

- Single source of truth

同じデータは常に同じ空間から来ている.

、すなわち、データを格納する記憶空間は1つしかない.

- State is read-only

ステータスは、

actionという名前のオブジェクトで変更できます.

- Changes are made with pure functions

変更は純粋な関数のみです.

Store

1つの空間

のみが制御された状態にある

要素がステータス情報を必要とする場合、storeにアクセスしてステータス情報を取得することができる.

Action

JavaScriptオブジェクト.

storeにアプリケーションデータを転送する役割を果たします.

{
  type: "ORDER",
  drink: {
    menu: "Americano",
	size: "Grande",
    iced: false
  }
}

Reducer

動作からStoreにデータを転送するにはReducerが必要です.

動作オブジェクトはDispatchに渡され、DispatchはReducerを呼び出して新しい状態を生成する.

ブラウザで+ボタンをクリックするイベントが発生すると、アクションオブジェクトはDispatchの伝達パラメータとしてReducerに渡されます.Reducerは、アクションオブジェクトのタイプに応じて異なるアクションを実行します.この操作の実行結果は新しいnew stateを返すと考えられる.

Reduxのメリット

状態を予測可能にする.

のメンテナンスに有利です.

デバッグ(actionとstate logの記録)

に有利

のテストを簡単に貼り付けます.