[Redux]フロントエンド開発におけるステータス管理

3766 ワード
redux ハーモニー テキストリンク

ステータス管理


1.ステータス

  • ステータス:UIに動的に表示されるデータ
  • ローカルステータス:特定の構成部品のみで管理
    *他のコンポーネントとデータを共有しないフォームデータ:inputbox、selectboxなど、入力値を受け取ると
    • になります.
  • グローバルステータス:生産全体または複数の構成部品によって管理されるステータス
    *他のコンポーネントとのステータスと影響ステータスの共有:
    • (ロード中)、ダークモード、国際設定などのデータのロードの有無

    2.データ整合性

  • グローバル状態でのデータ整合性:
    • データの変更または変更を制限することによって安定性に影響を与える要因を防止し、常にデータ状態の正確性を維持する
  • 完全性方法論:単一ソース(信頼できる単一ソース)原則

    • 3.ステータス管理ツール

  • React Context, Redux, Mobx
  • 機能:グローバルリポジトリを提供し、propsドリル(挿入プログラム)の問題を解決する

    • Redux



    ステータス管理ライブラリ
  • JavaScriptアプリケーションによる予測可能なステータス管理

    1.Reduxの三つの原則


    1) Single source of truth : Store

  • アプリケーションのステータスは、1つの場所によって管理される
  • すべての状態(状態)は、1つのリポジトリに1つのオブジェクトツリー構造
    • として格納.
  • ストレージ:構成部品とは独立した1つの空間管理可能な状態のみ
    *構成部品がステータス情報を必要とする場合、store取得情報
    • にアクセスする.

    2) State is read-only : Action

  • 状態は読取り専用データであり、動作のみが
    • 状態置換を要求する.
  • 応答では、setStateメソッドと同様のactionというオブジェクトを使用して、ステータス
    • を変更することができる.
  • アクション:JavaScriptオブジェクトで、オブジェクト内の各種データを含む(タイプを指定する必要がある)
    *アプリケーションデータのリポジトリへの転送:
    • 、Reducer
    {
  type: "ORDER",
  drink: {
    menu: "Americano",
    size: "Tall",
    iced: true
  }
}

    3) Changes are made with pure functions : Reducer

  • 変更は純関数で行う必要があり、reducer(純関数)設定状態の最終値
    • のみで行う.
  • Reducer:リポジトリの現在のステータスとアクションを使用して、
    • のステータスを作成します.
  • 動作オブジェクトはDispatchに送信され、DispatchはReducerを呼び出して新しい状態を作成する
    *ワンウェイフロー用デバイス(ワンウェイデータストリーム)
  • Dispatch:ストレージ管理者

    • 2.Reduxのメリット

  • 状態予測性
  • メンテナンスに有利
  • 操作とステータスログ記録はデバッグに便利です
  • 純関数を使用して、
    • のテストを容易にします.

    3.actionとstate log履歴の確認


    1) Redux DevTools


  • インストール:Redux DevTools2

    • 2) redux-logger


    npm install redux-logger 
    // store.js
import logger from "redux-logger"

const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(logger))
);
  • redux-logger:前のステータスと変更後のステータスは
    • を識別できます.
    コードベース100題(51～60)
    [CodingTest][BaekJoon] 2021.9.20. Day+2