Reduxを理解する方法

reduxの原則

企業には物流（actionType）、電子商取引（actionType）、広告（actionType）の３つの事業があり、その企業の財務システム（state）には３つの事業の収益が記録されます。それぞれ資金。ある日、電子商取引事業が会社の電子商取引プラットフォームで 100 万相当の商品 (アクション) を販売し、得た資金が請求書 (発送) の形で企業の財務部門に送られました。得られた利益 (リデューサー) は、その後、金融システム (状態) に更新されます。

中心原則: イベントアクションを通じて、結果はディスパッチを通じてリデューサーに送信され、リデューサーでは、さまざまな actionType に従ってさまざまなビジネスプロセスがデータに対して実行され、最終的な結果がステートツリーに更新されます。

私の上司の何人かは会社の資金を注意深く監視しており、資金の変動に常に注意を払う必要があるため、資金に変動があったときにテキスト メッセージを送信して彼ら (リスナー) に通知するイベント (サブスクライブ) を設定しました。資金。

原則: Redux には、状態データ変更イベントへの外部サブスクリプションを可能にする組み込みリスナー配列があり、状態ツリー内のデータが変更されると、すべてのリッスン イベントが通知されます。

APIの説明

function createStore(reducer, preloadedState, enhancer)

createStoreメソッドではredux環境全体を初期化します。 preloadedState は状態ツリーの初期値として機能します。このメソッドは redux のオープン インターフェイスを返し、redux の状態は返された API を通じてのみ操作できます。

createStore は返された API を返します:

 return {
    dispatch,
    subscribe,
    getState,
    replaceReducer,
    [$$observable]: observable
  }

store.getState: redux によって現在維持されている状態オブジェクトを返します;

store.subscribe: このインターフェースを通じて、つまり redux の状態がaccessed (状態データが変更されているかどうかに関係なく) redux は、登録されているすべてのイベントを走査します。

function subscribe(listener) {
    if (typeof listener !== 'function') {
      throw new Error('Expected listener to be a function.')
    }

    let isSubscribed = true

    ensureCanMutateNextListeners()
    nextListeners.push(listener)

    return function unsubscribe() {
      if (!isSubscribed) {
        return
      }

      isSubscribed = false

      ensureCanMutateNextListeners()
      const index = nextListeners.indexOf(listener)
      nextListeners.splice(index, 1)
    }
  }

store.dispatch: イベントアクションの実行後、結果をディスパッチを通じてリデューサーにプッシュします。アクションの結果は通常の js オブジェクトである必要があり、reducer では type 属性を含む必要があり、データは型に基づいて異なる方法で処理され、対応する状態に更新されます。

Reducerの後は、データが変更されたかどうかに関係なく、すべてのリスニングイベントが走査されます。

function dispatch(action) {
    if (!isPlainObject(action)) {
      throw new Error(
        'Actions must be plain objects. ' +
        'Use custom middleware for async actions.'
      )
    }

    if (typeof action.type === 'undefined') {
      throw new Error(
        'Actions may not have an undefined "type" property. ' +
        'Have you misspelled a constant?'
      )
    }

    if (isDispatching) {
      throw new Error('Reducers may not dispatch actions.')
    }

    try {
      isDispatching = true
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }

    const listeners = currentListeners = nextListeners
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }

    return action
  }

単一ページのアプリケーション全体では、createStore メソッドを 1 回呼び出すだけで、初期化されたオブジェクトがグローバルに利用可能であることを確認するだけで、redux によるデータの統合管理が実現します。

以上がReduxを理解する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。