redux 非同期操作の詳細な紹介 (コード例)

この記事では、redux の非同期操作について詳しく説明します (コード例)。必要な方は参考にしてください。

1. Redux の基本

redux

• ディスパッチ (アクション) を通じて - > ミドルウェア -> リデューサーはデータを処理します -> ストアの変更を監視し、ビューを更新して 1 つのストアに保存します

• オブジェクト内のreducerは純粋な関数であり、非同期操作には結果の不確実性による副作用が含まれるため、特別な処理が必要です

• # #react-redux

コンテナ コンポーネント。データとビジネス ロジックの管理を担当し、UI プレゼンテーションには関与しません。

UI コンポーネントは、UI プレゼンテーションを提供します。ステートレスとは、this.state を使用しないことを意味します。すべての状態

コンテナ コンポーネントは connect によって生成されます。ストアが変更されるたびに、connect が呼び出され、mapStateToProps、mapDispatchToPropsmapStateToProps という 2 つのパラメータを受け取り、状態を UI コンポーネントの props にマップします。 mapDispatchToProps、ディスパッチ メソッドを UI にマップします。コンポーネントの props
Provider コンポーネントは、コンテンツ API を使用して、接続で使用するストアを最上位レベルからコンポーネントの各層に渡します


2. 非同期処理のための Redux ミドルウェア

redux-thunkredux-thunk ミドルウェアによりアクションをメソッドにできる

アクションを受け取った後、ミドルウェアはアクション メソッドを実行し、結果をリデューサーに提供します。

アクションの混乱によりメンテナンスが困難になりますredux-saga

saga はアクションをリッスンし、このアクションに基づいてエフェクト操作を実行します
Effects は、ブロック呼び出しと非ブロック呼び出し、キャンセル、待機、競合、その他の操作を含む柔軟な API を提供します。
非同期操作の分離と実行に便利で、テストも簡単です
3。 redux-request-async-middleware

redux ドキュメントの非同期アクションから始めましょう。各インターフェイス呼び出しには、次の 3 つの同期アクションをディスパッチする必要があります。

リデューサーに通知するアクション。リクエストが始まりました。この種のアクションの場合、リデューサーは状態の isFetching タグを切り替える可能性があります。これにより、UI に読み込みインターフェイスを表示するように指示されます。 リクエストが成功したことをリデューサーに通知するアクション。この種のアクションの場合、リデューサーは受信した新しいデータを状態にマージし、isFetching をリセットすることがあります。 UI は読み込みインターフェイスを非表示にし、受信したデータを表示します。 リクエストが失敗したことをリデューサーに通知するアクション。この種のアクションの場合、リデューサーは isFetching をリセットする場合があります。さらに、一部のリデューサーはこれらの障害情報を保存し、UI に表示します。

つまり、インターフェイスは次のように開始されます。

dispatch(fetchPostsRequest(subject));
fetch(url).then(res => {
  dispatch(fetchPostsSuccess(subject, res));
}).catch(e => {
  dispatch(fetchPostsFailure(subject, e));
})

この操作をミドルウェアにカプセル化するだけです:


すべての非同期リクエストに共通です。 3 つのアクション

• サブジェクトを使用してどのリクエストであるかを区別します

• すべての結果をstore.requestsに配置します

• ミドルウェアのソースコード

  export const reduxRequest = store => next => action => {
    let result = next(action);
    let { type, subject, model } = action;
    let _next = action.next;
    if(type === FETCH_POSTS_REQUEST) {
      model().then(response => {
        _next && _next(response);
        store.dispatch(fetchPostsSuccess(subject, response));
      }).catch(error => {
        console.error(error);
        store.dispatch(fetchPostsFailure(subject, error));
      });
    }
    return result
  };/

redux-thunkと同様に、メソッドをアクションに組み込みます

• Middle ソフトウェアはFETCH_POSTS_REQUESTアクションをインターセプトします。

• reducerのソースコード

  export const requests = (state = {}, action) => {
    switch (action.type) {
      case FETCH_POSTS_REQUEST:
        return assign({},
          state,
          {
            [action.subject]: {
              isFetching: true,
              state: 'loading',
              subject: action.subject,
              response: null,
              error: null,
            }
          }
        );
      case FETCH_POSTS_FAILURE:
        return assign({},
          state,
          {
            [action.subject]: {
              isFetching: false,
              state: 'error',
              subject: action.subject,
              response: state[action.subject].response,
              error: action.error,
            }
          }
        );
      case FETCH_POSTS_SUCCESS:
        return assign({},
          state,
          {
            [action.subject]: {
              isFetching: false,
              state: 'success',
              subject: action.subject,
              response: action.response,
            }
          }
        );
      case FETCH_POSTS_CLEAR:
        return assign({},
          state,
          {
            [action.subject]: {
              isFetching: false,
              state: 'cleared',
              subject: null,
              response: null,
              error: null,
            }
          }
        )
        return state;
    }
  }

結果を件名に対応するレスポンスに入れます（間違っていたらエラーを入れます）エラーへの情報

• isFetching は現在のリクエスト ステータスを示します

• さらに、現在の状態state とサブジェクト情報も追加されます

• リクエストをカプセル化する

  const request = (subject, model, next) => {
    _dispatch(fetchPostsRequest(subject, model, next));
    return true;
  };

#FETCH_POSTS_REQUEST アクションを開始するメソッドを記述する

つまり、When を記述します。リクエストを行う場合は、リクエスト メソッド
を呼び出して結果をカプセル化するだけで済みます。結果と複数のリクエストの下の読み込みステータスを取得できます

• #さらに操作や形式がある場合は、リストなどのカプセル化を続けることができます

4. 概要
2. 状態管理に redux を使用すると、redux の複雑なロジックを記述する必要がなく、非同期操作の複雑さが最小限に抑えられます。

フロントエンドがインターフェイスを通じてデータを処理および保存するプロジェクトに適しています

インターフェイスは redux によって処理され、ビュー コンポーネントは処理されます外部には単純なインターフェイスのみを公開します。操作するには、ビジネス層とビュー層を分離します。

1. React 16.3 の新しいコンテンツ API と比較して、redux の利点は次の点にあります。ホットインサーションミドルウェアと純粋関数リデューサーの記述方法
2. #

以上がredux 非同期操作の詳細な紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。