反応せずにReduxを理解する

私はいつも同じ呼吸の中で反応とreduxについて話すために使用し、reduxは反応なしに存在しないと思います.これは、私のつぶやきに対する反応によってクリアされた大きな誤解でした.
.
このポストでは、私はどのように分離してreduxを学ぶことを共有し、その質問に答えることはredux関連する今日ですか?

Reduxとは
REDUXは、公式のdocsとしてのJSアプリの状態コンテナを予測します.

予測可能:アプリケーションへの状態変化は予測可能であり、これは時間(時間旅行)で追跡できる

州コンテナ:Reduxは我々のアプリケーションの状態を格納します.APP STATUSは、アプリケーション

のすべての個々のコンポーネントによって表される状態を意味する

JSアプリは:Redux任意のUIライブラリ(反応/Vue/角/バニラ…)で使用することができます.これは私には

なぜRedux
どのように複雑な状態管理をredux

コンポーネントは内部的に自分の状態を管理しますが、異なるコンポーネント間で状態の通信が必要な場合は、状態を共通祖先コンポーネントに持ち上げ、それを必要とするコンポーネントにドリルダウンする必要があります.
上の例では:名前の状態(+セッターメソッド)は、コンポーネントCによって管理されています、そして、Dはそれを必要とします、そして、我々はAに持ち上げます、しかし、構成要素Fがそれを必要とすると仮定してください、そして、我々はアプリケーション構成要素に移動して、それから構成要素fにそれを渡す必要があると仮定します.
これは、プロップのドリルの古典的な例であり、コンテキストで解決することができると思うかもしれないし、ここで偉大なarticleです.
ここでREDUXが単に状態管理プロセスを上回っていることを理解しましょう.

Reduxは、アプリケーションの状態を保持する集中ストアを維持し、ストアを購読している各コンポーネントは、更新された状態を受信します.次のセクションでreduxの完全な流れを調べます.

実生活例
私たちのすべては、預金/撤退などに私たちの生活の中で少なくとも一度銀行を訪問したでしょう.我々は銀行のVaultに直接行きませんが、銀行のスタッフが我々のために操作を処理するキャッシャーに頼みます.我々は、スリップを充填し、それをキャッシャーを与えることによって預金/撤退要求を与える.このシナリオをreduxで考えてみましょう.

銀行のVaultは、すべてのお金

を格納する店です

キャッシャーは、Vault

でお金を更新するためにユーザー行動を実行する還元剤です

顧客は、意図を意図して行動を派遣します

Reduxの原理

Storeは、アプリケーションの状態を保持する
全体のアプリケーションの状態は、単一の記憶装置

の範囲内でオブジェクトに格納される

アクションは、アプリケーションの状態の変更を記述します
Reduxのみで行われる状態オブジェクトを直接更新することはできません
アクションに基づいて実際の状態遷移を実行する

リダラー.
状態とアクションを取り、新しい状態を返す純粋な還元子.

ここでは、銀行シナリオの例で上記の概念を実装する方法を示します.
アクション

// Actions Objects to withdraw and deposit money
{ 
  type: 'WITHDRAW_MONEY',
  payload: 1000
}
{ 
  type: 'DEPOSIT_MONEY',
  payload: 500
}

// Action Creator
function withdrawMoney() {
  return {
    type: "WITHDRAW_MONEY",
    payload: 1000,
  };
}

減速機

const initialState = {
  amount: 5000,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "WITHDRAW_MONEY":
      return { ...state, amount: state.amount - action.payload };
    case "DEPOSIT_MONEY":
      return { ...state, amount: state.amount + action.payload };
    default:
      return state;
  }
};

店

const redux = require("redux");
const createStore = redux.createStore;
const store = createStore(reducer);

// access to State
console.log("Initial State", store.getState());

//register listeners via subscribe(listener)
const unsubscribe = store.subscribe(() =>
  console.log("Update State :", store.getState())
);

//state update via dispatch(action)
store.dispatch(withdrawMoney());

//handles unregistering of listeners by function returned by subscriber
unsubscribe();

銀行類推に戻ると、我々の銀行は拡大しており、企業の現在のアカウントを開きます.顧客の両方のタイプが異なる種類のニーズを持つので、小売業とビジネス顧客を一つのウインドウから管理するのは難しいでしょう.それで、効率的にすべての顧客を管理するために、銀行は「現在の口座」(Redux条件の新しい縮小)と呼ばれている新しいウインドウを開きます

const initialState = { 
amount: 10000
}
const currentAccountsReducer = (state=initialState , action) => {
 switch (action.type) {
    case "WITHDRAW_MONEY_CURRENT":
      return { ...state, amount: state.amount - action.payload };
    case "DEPOSIT_MONEY_CURRENT":
      return { ...state, amount: state.amount + action.payload };
    default:
      return state;
  }
}

今、我々はストアを作成するために2つのリダーズを結合する必要があります(それはアプリケーション全体の1つにすることができますように).銀行のアナロジーにおいて、これは顧客に貯蓄/現在のアカウント施設のためにトークンを与えるトークン自動販売機の一種でありえます.

const combineReducers = redux.combineReducers;
const createStore = redux.createStore;

const rootReducer = combineReducers({
  savings: savingAccountsReducer,
  current: currentAccountsReducer,
});

const store = createStore(combineReducers)

行動が送られるときはいつでも、それは還元器の両方に行きます、しかし、それの上の1つの行為だけ、他のものは無視します.
ミドルウェア
それはどのように我々はカスタム機能をreduxを拡張することができますです.これは、我々の機能をフックし、アクションが送信された後、それが減速に達する前にフックをポイントします.
一般的に使用されるミドルウェアの1つはredux loggerです

const reduxLogger = require("redux-logger");
const logger = reduxLogger.createLogger();

const applyMiddleware = redux.applyMiddleware;
const store = createStore(combineReducers, applyMiddleware(logger))

👇 ここではどのように我々はRDUX


非同期アクション
今まで私たちは同期アクションを見てきました.アクションが送られるとすぐに、還元器はすぐに状態を更新しますが、実世界のシナリオでは、エンドポイントからデータを取得するためにasync API呼び出しをしなければなりません.
APIからデータを取得し、Reduxストアに格納する方法を見てみましょう.
まず最初に、アプリケーションの初期状態を理解しよう

const initialState = {
  loading: false,
  error: "",
  data: [],
};

ディスパッチメソッドは非同期と呼ばれる必要がありますので、我々のアクションクリエーターから返された関数を処理する「redux thunk」というミドルウェアを必要とします.

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

👇 概念を実行する
Reduxを使用する方法を理解するには、ポストを読むことができます