Reduxとは?

「ReduxはJavaScriptアプリケーションの予測可能な状態コンテナです」
Reduxでは、一貫して動作し、異なる環境(サーバ、クライアント、ネイティブ)で動作し、テストしやすいアプリケーションを作成できます.さらに、タイムトラベルデバッガと組み合わせたリアルタイムコードの変更など、優れた開発者体験を提供します.
Reduxの定義は公式文書でそう言っています.
Javascriptの単一ページアプリケーションに必要な条件はますます複雑になっているため、これまで以上にjavascriptコードを使用してより多くのステータスを管理する必要があります.
ここで、ステータス(サーバ応答、キャッシュデータ、地域的に作成され、使用されているがサーバに保存されていないデータ)は、アクティブなルーティング、選択されたラベル、ロードを表示するかどうか、ページネーミングコントロールなどの様々なUIステータスも含む.

ReduxとReactが一緒に書いたら?

Reduxは、アプリケーションの上部にあるグローバルストレージ領域を作成し、他のすべてのコンポーネントにステータスを提供します.
グローバル範囲でデータを管理する場所はストレージエリアであり、内部にはアクションに基づいてデータ値を変更できる純粋な関数Reducerが定義されています.

Reduxと併用することでReactの欠点を補うことができます.(reactの利点は直感的で管理しやすいことですが、欠点は、コンポーネントが多くなると、アプリケーションの規模が大きくなると、親(親)コンポーネントから子コンポーネントにデータを移動する単一の構造部分が管理時に不要な複雑さを生じることです.)

Reduxの原則

真実は一つの根源から

アプリケーションのすべてのステータスは、オブジェクトツリー構造としてリポジトリに格納されます.
:1つのコード・ライブラリを使用すると、ステータス・ツリーが1つしかないため、デバッグが容易であり、迅速な開発サイクルのために開発されたアプリケーションのステータスを格納することができます.ステータスツリーが1つしかないので、元に戻す/やり直し(Undo/redo)を簡単に実現できます.

console.log(store.getState());

{
  visibilityFilter: 'SHOW_ALL',
  todos: [{
    text: 'Consider using Redux',
    completed: true,
  }, {
    text: 'Keep all state in a single tree',
    completed: false
  }]
}

ステータスは読み取り専用です。

状態を変える唯一の方法は、動作オブジェクトを渡し、何が起こったのかを説明することです.
:すべての状態変化は中央が管理し、すべての動作は厳格な順序で一つ一つ実行され、丹念に管理する必要のない微妙な競争状態である.動作はただのオブジェクトです.そのため、記録したり、シリアル化したり、記憶したり、後でテストやデバッグを行ったときに再現したりすることができます.

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
})

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
})

変化は純粋な関数で記述されるべきである。

アクションがステータスツリーをどのように変更するかを指定するには、プログラマは純粋なアクチュエータを作成する必要があります.
:reducerは、前の状態と動作を受け入れ、次の状態を返す純粋な関数にすぎません.以前のステータスを変更するのではなく、新しいステータスオブジェクトを作成して返さなければならないことを覚えておいてください.したがって、最初は1つのリダイレクトだけで十分ですが、アプリケーションをより小さなリダイレクトに分割することも考慮してください.これらのリダイレクトは、アプリケーションの成長に伴ってステータスツリーの一部を操作します.Reduserは単なる関数であるため、呼び出しの順序を決定したり、追加のデータを渡したりすることができます.一般的な再利用可能なreducerを作成することもできます.

function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case 'COMPLETE_TODO':
      return [
        ...state.slice(0, action.index),
        Object.assign({}, state[action.index], {
          completed: true
        }),
        ...state.slice(action.index + 1)
      ]
    default:
      return state
  }
}

import { combineReducers, createStore } from 'redux'
let reducer = combineReducers({ visibilityFilter, todos })
let store = createStore(reducer)

Reduxの重要な用語

≪ステータス｜Status｜emdw≫

[ type State = any ]
ステータスツリーとも呼ばれます.Redux APIでは、一般にリポジトリによって管理され、getState()によってステータス値が返される一般的な単語です.ステータスはReduxアプリケーションの全体的なステータスを表し、通常は深さが重なるオブジェクトと見なすことができます.

アクション

[type Action = Object]
動作は状態を変える意図を表す一般的なオブジェクトである.動作はリポジトリにデータを格納する唯一の方法であり、UIイベントからでも、ネットワークコールバックからでも、Webソケットなどの他のソースからでも、すべてのデータが動作として送信されます.
アクションには、どのタイプのアクションが実行されるかを示すタイプが必要ですが、タイプは定数として定義され、他のモジュールからインポートできます.

さいせいき

[type Reducer = (state: S, action: A) => S]
リダイレクト(リダイレクト関数)は、累積値と値を受信することによって新しい累積値を返す関数で、値のセットを受け入れ、値を1つの値に減算します.
ReduserはReduxの概念だけでなく,基本的には関数式プログラミングから来ていると考えられる.JavaScriptには、リフレッシュ用の内蔵API、Arrayがあります.prototype.reduce()に相当します.
Reduxでは、累積値は状態オブジェクトであり、累積する値は動作である.Reduserは、与えられた以前の状態および動作において新しい状態を計算する.これらは純粋な関数でなければなりません.同じ入力があれば、同じ出力を返します.
API呼び出しをreducerに置かないでください.

派遣関数

[type BaseDispatch = (a: Action) => Action
type Dispatch = (a: Action | AsyncAction) => any]
dispatch関数は、動作または非同期動作を受信する関数です.受信後、1つ以上のアクションをリポジトリに送信してもよいし、送信しなくてもよい.
デフォルトのディスパッチ関数は、リポジトリのリスナーに同期してアクションを送信する必要があります.これにより、Reduserはリポジトリから返された古い状態とともに新しい状態を計算します.この場合、Reduserを使用するためには、動作は通常のオブジェクトでなければなりません.
また,ミドルウェアは基本的なDispatch関数を囲み,ミドルウェアによりDispatch関数は動作だけでなく非同期動作も処理できる.

非同期アクション

[type AsyncAction = any]
非同期動作は、デフォルトのdispatch()関数に渡す前に、ミドルウェアを介して動作(または一連の動作)に変換する必要があります.ミドルウェアによってはタイプが異なる場合があります.

ミドルウェア

[type MiddlewareAPI = { dispatch: Dispatch, getState: () => State }
type Middleware = (api: MiddlewareAPI) => (next: Dispatch) => Dispatch]
ミドルウェアはdispatch関数と組み合わせて新しいdispatch関数を返す高次関数である.彼らはよく非同期動作を動作に変換する.
中間部品は関数結合によって相互に結合することができる.これは、動作を記録したり、ルーティングのような追加の効果を生じたり、非同期API呼び出しを一連の同期動作に変換したりするのに役立つ.

リポジトリ

[ type Store = {
dispatch: Dispatch,
getState: () => State,
subscribe: (listener: () => void) => () => void,
replaceReducer: (reducer: Reducer) => void
}]
リポジトリは、アプリケーション・ステータス・ツリーを持つオブジェクトです.Reduxアプリケーションには、Reduserレベルで結合されるため、リポジトリが1つしかない必要があります.
dispatch(action)は、上記のデフォルトのディスパッチ関数です.
getState()は、リポジトリの現在のステータスを返します.
subscribe(listener)登録状態が変化したときに呼び出される関数.
熱再ロードとコード分割を実施する場合は、置換エクスポートを使用します.みんなが使う必要はあまりありません.
注意:
https://ko.redux.js.org/
https://jeffgukang.github.io/react-native-tutorial/
https://react.vlpt.us/