[コンピュータ科学]Reduxは?

Reduxとは?

👉 ReduxはJavaScriptステータス管理ライブラリです.

ステータス管理が必要

👉 ステータスとは?

Reactでは、stateはコンポーネント内で管理されます.

👉 コンポーネント間で情報を共有

サブコンポーネント間でデータを直接転送することはできません.

サブコンポーネント間でデータを交換する場合は、管理状態の親コンポーネントで交換します.

人の子供が増えると、状態管理が非常に複雑になる.

管理

ステータスの親コンポーネントから取得を続行する必要があります.(Propsドリルホットスポット)

👉 ステータス管理ライブラリを使用します.

グローバル状態記憶は

を提供する.

Props掘削ホットスポット解決

👉 ステータス管理ツールのタイプ

React Context

Redux

MobX

Reduxの3つの原則

1) Single source of truth
原則として、1つのアプリケーションで1つのショップしか使用しません.これにより、アプリケーションのデバッグが容易になり、サーバとシリアル化され、クライアントがデータを受信しやすくなります.
2) State is read-only
状態を変える方法は動作を起こすしかない.これにより、状態を変化させる意図を正確に表現することができ、追跡状態の変化をより容易にすることができる.
3) Changes are made with pure functions
変化を引き起こすreducer関数は純粋な関数でなければならない.純関数は次の条件を満たします.

reducer関数は、以前の状態と動作オブジェクトをパラメータとして受け入れます.

パラメータ以外の値に依存することはできません.

以前の状態は絶対に触れられず、新しいオブジェクト状態を作成することによって返されます.

と同じパラメータを呼び出すreducer関数は、常に同じ結果値を返さなければなりません.

Redux基本用語

1)動作
状態を変える必要があるなら、行動を始めなければならない.アクションはオブジェクトとして表示され、typeフィールドが必要です.

{
   type: 'ADD_TODO',
   data: {
       id: 1,
       text: '리덕스 배우기'
   }
}

2)動作作成関数
アクション生成関数は、アクションオブジェクトを作成する関数です.矢印関数で表すこともできます.

function addTodo(data) {
 return {
   type: 'ADD_TODO',
   data,
 }
}

3)Reducer
リダイレクトは、現在のステータスとアクションオブジェクトを受信し、必要に応じて新しいステータスを返します.アクションタイプに基づいてイベントを処理するイベントリスナーと考えられる.

const initialState = {
 counter: 1,
}
function reducer(state = initialState, action) {
 switch (action.type) {
   case INCREMENT:
     return {
       counter: state.counter + 1,
     }
   default:
     return state
 }
}

4)ショップ(Store)
店は状態がある.1つのプロジェクトには1つの店しかありません.
5)派遣
ショップの内蔵関数の1つとして,dispatchは動作オブジェクトを伝達することによって状態を更新する唯一の方法である.イベントトリガと考えられます.
6)サブスクリプション(Subscribe)
ショップ内蔵関数の1つであるサブスクリプションは、リスナー関数をパラメータとして呼び出すことで、ステータスを更新するたびに呼び出されます.アクティビティリースと見なすことができます.

const listener = () => {
 console.log('상태가 업데이트됨')
}
const unsubscribe = store.subsribe(listener)

unsubscribe() // 추후 구독을 비활성화할 때 함수를 호출

7)セレクタ
普通のハーブ.jsのreduceはショップの内蔵関数getStateを使用し、react-reducxはステータス値を取得するために使用されます.

Redux状態変化流

初期状態

には、まずroot reduce関数を使用して作成されたリカバリストアがあります.

ストアはroot reduceを1回呼び出すだけで、戻り値を初期状態に保存します.

UIが最初にレンダリングされると、UIコンポーネントはリカバリポイントの状態にアクセスし、レンダリングに使用される.その後のステータスの変更更新を購読します.

更新(シーケンス)
1)プレイヤーはボタンをクリックする.
2)アプリケーションはユーザの行動に応じてDispatchを行い,動作を開始する.
3)ショップは以前の状態と現在の動作を用いて再生関数を実行し,その再生値を新しい状態に保存する.
4)店舗は購読店のUIが更新されたことを通知する.
5)記憶領域データが必要なUIごとに、必要な状態が更新されたかどうかをチェックする.
6)データ変更後の各コンポーネントは、強制的に新しいデータとして再レンダリングされるので、画面に表示される内容を更新することができます.

Reduxはいつ使えばいいですか?

👉 公文書を参照

アプリケーションの複数の場所に大量の必要な状態が存在する場合(グローバルな状態が必要と感じる場合)、

.
常時更新状態

の場合、

状態を更新する論理が複雑である場合、

アプリケーションは、多くの人によって管理されている場合、

の中または大サイズのコードを有する.

の状態更新を観察する必要がある場合、

Reduxのメリットとデメリット

長所

一方向モデリング(一方向のみ変更).actionを割り当てるたびにレコードが残り、エラーが見つかりやすい.タイムマシン機能が利用可能です.

状態集中化:StoreというグローバルJavaScript変数によって1つの場所でステータスを管理するため、グローバルステータスを管理する際に非常に有効です.

Reduxは、ステータスを読み取り専用と見なします.ステータスは読み取り専用で、前のステータスに戻るには、前のステータスを現在のステータスに上書きするだけです.

短所

は非常に小さな機能であっても、Ridexを使って実現した瞬間に、いくつかのファイル(アクションなど)を作成してコード量を増やす必要があります.

タイムマシン機能を使用するには、不変性の概念に従って使用する必要があります.そのため、stateというオブジェクトは毎回作成されます.

Reduxはステータスを読み取り専用と見なしますが、実際の読み取り専用にはなりません.そのため、うっかり状態を直接変更しないように常に注意しましょう.

Reference

注意:道徳的な長所、短所