redux-thunkの実践プロジェクト事例を詳しく解説

今回は redux-thunk 実践プロジェクトの詳細な説明をお届けします。 redux-thunk 実践プロジェクトを使用する際の注意点を以下に挙げます。

redux の中核となる概念は実際には非常に単純です。変更する必要がある状態をストアに保存し、アクションを開始して何が起こったのかを記述し、リデューサーを使用してアクションが状態ツリーをどのように変更するかを記述します。ストアを作成するとき、ストア内のデータを実際に変更できるのは、store.dispatch API です。

1. コンセプト

アクションをディスパッチした後、リデューサーに到達する前に、追加の操作を実行するには、ミドルウェアを使用する必要があります。 Redux ミドルウェアを使用すると、ロギング、クラッシュ レポートの作成、非同期インターフェイスやルーティングの呼び出しなどを行うことができます。
つまり、ミドルウェアはstore.dispatch()の拡張です

2.ミドルウェアの使い方

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
const store = createStore(
  reducers, 
  applyMiddleware(thunk)
);

サンクミドルウェアを直接導入してapplyMiddlewareメソッドに入れてcreateStoreメソッドに渡すだけで完了です 機能拡張store.dispatch() に。つまり、一部の非同期操作はリデューサー内で実行できます。

3.applyMiddleware()

実際、applyMiddleware は Redux のネイティブ メソッドであり、すべてのミドルウェアを配列に結合し、順番に実行します。

さらに多くのミドルウェアがある場合は、それをパラメーターとして 1 つずつ渡すことができます

const store = createStore(
  reducers, 
  applyMiddleware(thunk, logger)
);

その進化を理解したい場合は、redux の公式ドキュメントにアクセスしてください: https://redux.js.org/advanced /middleware

4.redux-thunk

redux-thunkのソースコードを分析するnode_modules/redux-thunk/src/index.js

function createThunkMiddleware(extraArgument) {
 return ({ dispatch, getState }) => next => action => {
  if (typeof action === 'function') {
   return action(dispatch, getState, extraArgument);
  }
  return next(action);
 };
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;

redux-thunkミドルウェアエクスポートのデフォルトは、createThunkMiddleware()によって渡されるサンクです。 createThunkMiddleware 関数を見ると、Ke 関数が返されます。 ES5 に変換したコードは読みやすくなりました

function createThunkMiddleware(extraArgument) {
  return function({ dispatch, getState }) {
    return function(next){
      return function(action){
        if (typeof action === 'function') {
          return action(dispatch, getState, extraArgument);
        }
        return next(action);
      };
    }
  }
}

それを見ると、redux-thunk の最も重要なアイデアは関数を返すアクション クリエーターを受け入れることができるということがわかります。アクション作成者が関数を返す場合は、それを実行します。そうでない場合は、元の next(action) に従って実行します。

このアクション クリエーターは関数を返すことができるため、この関数でいくつかの非同期操作を実行できます。

例:

export function addCount() {
  return {type: ADD_COUNT}
}
export function addCountAsync() {
  return dispatch => {
    setTimeout( () => {
      dispatch(addCount())
    },2000)
  }
}

addCountAsync 関数は関数を返し、関数の最初のパラメーターとしてディスパッチを渡し、関数内で非同期操作を実行します。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS を使用して過去 7 日間と過去 3 日間の日付を取得する方法

プロジェクトで Angular ng-animate と ng-cookie を使用する方法

以上がredux-thunkの実践プロジェクト事例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。