Reduxとは?

ReduxはJavaScriptアプリケーションの予測可能な状態コンテナです
(=ステータス管理ライブラリ)

ガイドを使用すると、構成部品の外でステータス管理を行います.
親から子までの子がステータスを持っている場合、「≪リカバリ｜Recovery｜emdw≫」を使用してコンポーネント構造の外にステータスを配置したり、ショップを仲介者としてステータスを更新したり、新しいステータスを渡したりすることができます.従って、複数の素子間でも、どれだけ深い素子間でも、直属の親から得られるように、所望の状態値を選択してpropsを容易に取得することができる.

ReduxはReactとは違います.
反応ライブラリではなく他のライブラリで使用することもできます.

Reduxの3つのルール

1.アプリケーションにショップがあります。

しかし、必ずしもそうではない.
一部の更新が頻繁であるか、アプリケーションの一部が完全に分離されている場合は、複数のショップが作成される可能性があります.しかし、このようにすれば、開発ツールを利用することはできません.

2. State is read-only

既存のステータスを変更せずに、新しいステータスを作成して更新します.
このように更新すれば,後で開発者ツールを介して後方または後方に更新することができる.
Ridexで不変性を保つ必要があるのは,内部データの変化を検出するために浅い等しい検査を行ったからである.このようにすれば、対象の変化を検出する際に、中に深く入り込むのではなく、軽く味わうだけで済むので、良好な性能を保つことができます.

3. Changes are made with pure functions

変化を引き起こす関数、reducerは純粋な関数でなければなりません.

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

以前の状態は、絶対に触れられず、既存のオブジェクトで変化した新しい状態オブジェクトを作成して返します.

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

3つの事項に注意する.同じ入力の場合は、常に同じ出力が必要です.実行するたびに異なる結果値が現れる論理(new Date()など)については、reducer関数の外で処理する必要があります.

Reduxのメリット

状態を予測可能にする.

メンテナンスが容易

デバッグ(actionとstate logの記録)

に有利

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

Reduxの基本概念

Action

アプリケーションのデータをstoreのオブジェクトに転送します.
状態に変化が必要な場合は、動作が発生します.
アクションオブジェクトのフォーマットは次のとおりです.

{
  type: 'TOGGLE_VALUE'
}

アクションオブジェクトにはtypeフィールドが必要です.この値を動作の名前に考えればいいです.また,その他の値は,後で状態更新を行う際に参照すべき値であり,作成者が任意に入力できる.

アクション作成関数(action creator)

アクションオブジェクトを作成する関数

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

const changeInput = text => ({
  type: 'CHANGE_INPUT',
  text
})

Reducer

変化を引き起こす関数.動作を作成して生成すると,Reduserは現在の状態と伝達された動作オブジェクトをパラメータとして受信する.次に、2つの値を参照して新しいステータスを作成し、戻ります.

const initialState = {
  counter: 1
};

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

Store

コピーをプロジェクトに適用するショップを作成します.1つのプロジェクトには1つの店しかありません.ショップには、現在のアプリケーションのステータスとリカバリプログラムが含まれています.また、いくつかの重要な組み込み関数もあります.

Dispatch

dispatchはショップの内蔵関数の一つです.Dispatchは「動作が発生する」と理解できる.この関数はdispatch(action)と同じ形式で動作オブジェクトをパラメータとして呼び出す.
この関数を呼び出すと、ショップはリカバリ関数を実行して新しいステータスを作成します.
「動作オブジェクトはDispatchに渡され、DispatchはReducerを呼び出して新しい状態を生成する」

Subscribe

購読もショップの内蔵機能の一つです.リスナー関数をパラメータとしてsubscribe関数に入れて呼び出すと、リスナー関数は動作がdispatcherされ、状態が更新されると呼び出されます.

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

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

Presentational Component / Container Component

Presentational Component
主にステータス管理はなく、propsを受信してUIのコンポーネントを画面に表示するだけです.

Container Component
リドス関連の部品は、リドスからステータスを取得し、リドスショップにもアクションを派遣します.

この分離モードを使用すると、コードの再利用性が向上し、興味点の分離が実現され、UIの作成時により集中することができる.

useSelector(), useDispatch()

リカバリストアに関連付けられたコンテナ構成部品を作成する場合は、connect関数ではなくreact-redoxが提供するHooksを使用することもできます.

ユーザー・セレクタを使用したステータスの表示

const 결과 = useSelector(상태 선택 함수)

useDispatchを使用したアクションの送信

このHookでは、コンポーネント内でショップの内蔵関数dispatchを使用できます.

const dispatch = useDispatch();
dispatch({ type: 'SAMPLE_ACTION' });