✍️ TILog_04

今日はReduxを勉強しました.Redux構成部品とステータスを別々に管理できるライブラリ.ReduxはReactの関連ライブラリまたはサブライブラリと誤認され、実際には何の操作も行わずに使用できる状態関連ライブラリである.
Redux公式ホームページ

なぜReduxを使うのですか?

兄弟コンポーネント間でデータを交換する場合は、親コンポーネントにステータスを作成し、親コンポーネントを介して交換します.このときサブアセンブリが多くなったら?複雑になります.Reduxを使用してステータスを個別に管理すると、兄弟コンポーネント間のデータ交換が容易になり、各コンポーネント内の機能実装に集中できます.

Reduxの基本概念3原則

単一の真実のソース:同じデータは常に同じ場所から来ます.->インポートデータのstoreが存在します.

State is read-only:actionでのみステータスを変更できます.

Changesは純funcionsで構成されています.変更は純関数のみです.->reduceに関連する概念

Store

すべてのステータスをstoreに保存し、各コンポーネントでstoreにアクセスできます.

Action

JAvaスクリプトオブジェクト形式.アプリケーションデータのstoreへの転送を担当します.

{
  type: "ORDER", // type지정은 필수!!
  drink: {
    menu: "americano",
    size: "grande",
    iced: false
  }
}

Reducer

Actionがstoreにデータを送信する場合はreduceを経由する必要があります.より詳細には、actionオブジェクトはdispatch(メソッド)に渡され、dispatchはreduceを呼び出して新しい状態を生成し、storeを生成する.

この過程を結びつける方法は2つある.map、state、props、hooksの使い方があります.最近出てきたより直感的なredoxhooksを使いましょう!

Reduxのメリット

状態を予測可能にする.

メンテナンスが容易な

.

のデバッグに役立ちます.(actionとstate logに書き込む):redux-devtoolsを使用!

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