22035リドス

3791 ワード
React 航海 TIL テキストリンク

ステータス管理ツールとは?

  • 親コンポーネントを経由しないと、サブコンポーネント間で直接データを転送することはできません.
  • ですが、サブコンポーネントが増えるにつれて、ステータス管理が非常に複雑になります.
    例えば、Aという最上位の要素があると仮定し、以下は100個のサブ要素である.
    100番目のサブエレメントで最上位エレメントのステータスを参照する必要がある場合は、
    • を参照してください.
  • 第1のサブエレメントから第99のサブエレメントは、100番目に書かない状態のために、持ち去らなければならない
  • この現象はPropsドリルホットスポット
    • と呼ばれている.

    ❗状態管理ライブラリがこの複雑さを解決

  • 状態管理ライブラリは、グローバル状態記憶
    • を提供する.
  • サブコンポーネントは、グローバル状態リポジトリから必要な状態を取得することができる.
    Propsドリル問題を解決できる

    • 👉 じょうちょう


  • JavaScriptによって駆動されるアプリケーションでは、
    ステータス管理ライブラリは、予測可能なステータスの管理に役立ちます.

  • 冗長性は、エコシステムで最も使用率の高いステータス管理ライブラリに応答します.

  • 反応器の中で最も使用率が高いが、
    ステータス管理ライブラリは、リアクターだけでなく、他のJavaScriptフレームワークにも使用されます.

    • バーリデスの3つの原則


  • 1つのアプリケーションに1つのショップしかありません

  • ステータスは読み取り専用です
  • の不変性を維持しなければならない.
  • 、すなわち、Aに1を加えた場合、A=A+1ではなく、A’=A+1となる
    新しい値を作成し、A"
    • に置き換えます.
  • storeの状態(データ)は動作
    • にしか変更できません.
  • 反応器で直接状態管理を行うのではなく、setStateメソッドを使用して変更します.
    reduceは、アクションオブジェクトのみで変更できます.

  • 変化を引き起こす関数、reducerは純粋な関数であるべきです
  • reducer関数は、パラメータ
    • として以前の状態および動作オブジェクトを受け入れる.
  • 以前の状態は絶対的に変わらず、新しい状態オブジェクトを作成し、
    • を返します.
    同じパラメータを呼び出すreducer関数は、常に同じ結果値
  • を返さなければならない.

    • Yang Ridex用語の整理

  • state
  • リデックスは、格納された状態値(「データ」とみなすことができる)をstateと呼ぶ
  • Action
  • 動作とは、対象
    • を指す.
  • アクションオブジェクトの場合、typeフィールドは必須フィールドである必要があります.
    タイプフィールドは、actionの名前(フィーチャー)を記述する文字列
    • である必要があります.
  • 状態に変化が必要な場合に動作
    • が発生する.
    //action
{
type : "ADD_TODO",
data : {
  text : "리덕스 배우기"
}
}
  • Action creator
  • 動作を生成する関数であり、動作生成関数とも呼ばれる
    受信パラメータはactionオブジェクト
    • を生成して返す.
  • 通常関数の前にexportキーワードで他のファイルから読み込み、
    • を使用する.
    export const addTodo = (data) => {
	return {
		type: "ADD_TODO",
		data
	};	
}
  • Reducer
    関数
  • は、人徳に格納された状態(=データ)を変更するために使用されます.
  • は、現在の状態および動作オブジェクトを受信し、必要に応じて更新方法を決定する.
    新しいステータス
    • を返します.
  • Store
  • 転売業者、現在のアプリケーション状態、転売業者は
    • を得ることができる.
  • は、いくつかの重要な組み込み関数
    • を含む.
  • ディック・シャナリーやjsonに似ています
  • Dispatch
  • store dispatchメソッド
    • を有する
  • dispatchは行動を起こす方法が簡単だと考えている
  • ステータスを更新するにはstoreを使用します.dispatch()メソッドを呼び出します.
    アクションオブジェクトを渡すだけでいい

    • 冗長状態管理フローチャート


    sliceとspliceの違い
    ChunkLoadError