この文章はhttps://medium.com/dailyjs/when-do-i-know-im-ready-for-redux-f34da253c85fを参考にした.

Reduxバー

Reduxは、アプリケーションのステータスを管理するためのツールであり、Reactアプリケーションではよく使用されます.
次はRedux公式サイトに掲載されている文で、JSPAppに予測可能なステータスコンテナを提供することを意味します.つまり、ReduxはReactだけでなく、他のFrameworkと連携して仕事をすることもできます.
(VUEでは、Vuexに似ていると思います.)

なぜReduxを使うのですか?

reactは、各クラスエレメントに独自の状態があり、propsを介してサブエレメントに情報を伝達できる構造を有する.
したがって、は、親アセンブリの支柱の操作または使用をサブアセンブリにおいても受け入れることができる.しかし、この過程で多くのコンポーネントがデータ(propsとして受信した複数の値)を必要としない場合、どうなるのでしょうか.
位のように、間に不要な道具伝達(過度な道具ドリル)は、複数の容器のうちの1箇所であっても、道具の伝達が意外に途切れると、実質的に必要な部分で道具の伝達が得られなくなる.
だからこれはよくないの?Reduxを使用して構造を解決します.代表的な使用例は「ログイン」です.
すなわち、Reduxは、コンポーネントの外ではなく、ステータス管理ロジックをグローバルに格納および使用することを可能にする.

Flux pattern

Reduxの構造を理解する前に、まず最初に理解しなければならないのはFluxモードです.このモードは,FacebookにおけるMVCモードの限界を克服するために生成された新しい一方向データストリームである.Fluxモードについての記事は、ここを参照することができる.
要するにReduxはこのFluxモードに基づいている.

Reduxの構造とプロセス

Reduxの構造は,Actions,Reducer,Storeに大別できる.
アクションはcomponentから割り当てられ、このアクションはReducer関数を起動し、最終的にストレージ領域の状態を更新し、storeを購読するcomponentも更新される.これがReduxの流れである.

Actions

アプリケーションで発生するオブジェクトを定義します.ステータスを変更する方法が含まれています.
Actionは基本的に次のような形式で現れる.

const ADD_TODO = 'ADD_TODO'
const REMOVE_TODO = 'REMOVE_TODO'
const LOAD_ARTICLE = 'LOAD_ARTICLE'

export function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

一番上のようにactionタイプは通常定数として定義されます.次に、actionオブジェクトを実際に作成するaction creatorを示します.実際に使用すると、action creatorによってactionオブジェクトがreduceに割り当てられます.

Reducers

簡単に言えば,これは状態論理を変える関数である.
ある程度、Reduxは最も核心的な役割であり、前のaction creatorでReducerに渡されるactionのタイプに応じてstateを変更します.
次の例を示します.完全な減速機ではないがReducerの挙動を理解するのに十分である.

export const authReducer = (state=initialState, action) => {
  switch(action.type) {
    case CALL_LOGIN:
      return {...state}
    case CALL_LOGIN_SUCCESS:
      return {
        isLogin: true,
        username: action.user.username
      }
    case CALL_LOGIN_FAIL:
      return {...state}
      
      ...
      
    default:
      return state

Reducerは状態と動作オブジェクトを受信する.次にswitch文actionを介します.Reducerの役割は,タイプを決定し,各動作に対して予め作成された状態変化論理を実行することである.
Reducerの特徴をまとめてみます

Reducerは純粋な関数で記述されるべきである.
純関数とは、関数がどこで実行されても、いつでも外部状態が変化しない場合に、同じ入力値に対して同じ結果値を返さなければならない関数です.

Reducerは、以前の状態と動作をパラメータとしなければならない.

Reducerは、結果値として以前のデータを変更することなく、新しいデータ(オブジェクト)を生成して返します.

Store

Actionsとreducersとは逆にStoreにはsがありません.これはReduxのstoreがFluxとは異なり、1つのルートに1つのstoreしかないからです.
Storeには、ステータスがオブジェクトとして格納されます.各コンポーネントはStoreを購読でき、Storeが変化するとコンポーネントも更新されます.

整理する

不要なデータ・ストリームを制御でき、サービス全体のUIがアプリケーションのステータスによって大きく変化する場合(ログインするかどうかなど)、Reduxの採用は多くのメリットをもたらすため、できるだけ早く採用することを考慮したほうがいいです.
次のリンクを追加で読むのも役立ちます.
When do I know I'm ready for Redux?
前文の訳本
Redux公式ドキュメント
ReactのReduxの実際のコードはRedux-Sagaと一緒に次の記事で詳しく紹介します!