[JavaScript] TWIL : Redux (20/11.24~11.27)

Reduxを勉強しました.
先進的なツールなので、勉強やスキップの時間は短いですが、重要なツールなので、概念的な部分でも整理してスキップします.

Reduxとは?

ReduxJavaScript web/アプリケーション用の状態関連ライブラリです.
ユーザインタフェースは、構成部品からなるツリーで構成されます.
素子はpropsとstateの2つの属性を有し、ブログに返信で説明した.
propsは不変属性(ex人間、女、男)、stateは可変属性(ex年齢、職業)である.
Reduxを使用する前に、最上位レベルの構成部品でstateを継承する最下位レベルの構成部品にトリガが発生し、state属性値が変化した場合、stateドラッグ&ドロップを使用して最上位レベルのステータス値を変更します.
しかし、非常に複雑なUIであれば、stateのアップグレードは非常に困難です.
Reduxでは、独立したストレージ領域にステータスを格納および管理できます.
深さのある構成部品は、リポジトリにアクセスしてstateを読み取り、actionで更新できます.また、以前の状態を履歴として保存することもできます.
これは私たちがReduxを勉強しなければならない理由と言える.
通常reactとともに使用されますが、これは通常reactのサブライブラリと誤認されます.
Reduxは、コンポーネントを構成するUI構成に使用できる独立したツールであり、何の操作も必要ありません.
しかし、今回のスプレーはReduxで再包装されているので、Reactと結びつけて言うべきです.
あなたたち二人は互いに独立していることを知っています!

Reduxの重要な概念

Reduxの動作原理(出典:Redux公式ホームページ)

Action, Dispatch, Reducer, Store

Action

ActionStoreに送信されるデータのセットです.
追加する新しい状態値を含む単純JSオブジェクトとして作成し、どのような形式の動作を実行するかを示すtype属性値を含める必要があります.残りの値はユーザー定義に従います.また、必要に応じて動作生成関数を作成するのも便利です.
基本アクションの推奨構造は次のように定義されます.

{
  type: 'ADD_TODO',  // 필수
  payload: {  // 사용자 정의
    text: 'Do something.'  
  }
}

Dispatch

dispatchは生成した動作をReducerに送信する方法である.動作は最初のパラメータとして伝達される.

dispatch(action); // --> Reducer가 받는 action으로 보냄

Reducer

Reducerは、以前の状態と動作を受け入れ、新しい(update)状態を返す純粋な関数です.純粋な関数のように動作するため、Reducerは副作用を禁止し、API呼び出しを禁止し、パラメータの変更を禁止します!
この3つはReducer内では絶対に禁止されています.
また、Reducerは設定カテゴリに応じて複数作成して使用することができる.
ユーザー情報を設定するReducerを作ろう

Reduxは、最初は未定義の状態でReducerを呼び出す.その場合、初期状態を特定することができます.

使用

スイッチドア症例分型を行った.

default値は、以前の状態を格納します.

const userInfoReducer = function(state = initialState, action) {
  switch (action.type) {
    case SET_USERNAME:
      return Object.assign({}, state, { // 여기서, state를 직접 변경하지 않았다. 빈 객체에 state를 복사해서, currentUser만 새 값으로 덮어씌웠다. 절대 원래 state를 직접 변경하면 안된다. 이유는 Redux의 3가지 원칙에서 알 수 있다.
        currentUser: { name: action.name }
      })
    case SET_USERGRADE:
      return Object.assign({}, state, {
        userGrade: { grade: action.grade }
      })
    ...
    default:
      return state;
  }
};

Store

これにより、Reduxを使用すると、各構成部品にactionを解放し、各減速機を使用して新しい状態を更新するリポジトリを実行できます.
どのサブコンポーネントもリポジトリにアクセスしてstateの値を読み込むことができるため、複雑なアプリケーションを実行するほど、必要なライブラリは少なくありません.

Reduxの3つの原則

1. Single source of truth
:Reduxには単一のリポジトリがあります.クラスエレメントのようにトリガを追跡してstateを上げる必要はありません.
2. State is read-only
:stateは読み取り専用です.更新はactionのReducerのみ使用できます.個人構成部品からstateを直接更新することは絶対にできません.
3. Changes are made with pure functions
:Reducerでステータスを変更するには、純粋な関数のようにする必要があります.上記のReducerの例では、コメントセクションを表示します.
前のstate(historyであるため)を直接変更するのではなく、コピーによって上書きします.

Presentational vs Container

ReactとReduxを勉強すると、何が陳述なのか、何が内容なのかを感じることができます.
名前の通り、プレゼンテーションコンポーネント(event,DOM)は画面に集中して表示されます.
Container Componentは、コンポーネントが実行するアクション(ステータス管理)の機能を管理します.
1つの構成部品のファイルに2つの性質をブレンドすると、非常に複雑で読み取り可能性が悪くなります.
各コンポーネントのプレゼンテーションとコンテンツを別々にしてファイルを構築すると、メンテナンスが容易になります.
このようにRedux環境の概念を簡単に整理した.Reduxを使用してReactとして構築されたファイルを再パッケージするのは容易なことではありません.TT
これはclassコンポーネントでstateを作成して管理するよりもはるかに複雑ですが、Webサービスを構築すると数百、数千のコンポーネントが生成され、ステータス管理ライブラリが不可欠な条件になることを肌から感じることができます.
今回はReduxが使える時間は短かったのですが、いったんプロジェクトを始めたら、十分勉強して使うことができました.仲良くなれば、本当に良い友達になれる.😂