web-dev-qa-db-ja.com

redux-thunkを使用する理由

redux-thunkのようなものの必要性を理解していません。私が理解していることから、thunkは関数を返す関数です。ラップされた表現とミドルウェアの使用は、何が起こっているのかを不明瞭にするためにより多くを行うように思えます。 redux-thunkのサンプルコードから取得

import thunk from 'redux-thunk';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);


// Meet thunks.
// A thunk is a function t hat returns a function.
// This is a thunk.

function makeASandwichWithSecretSauce(forPerson) {

  // Invert control!
  // Return a function that accepts `dispatch` so we can dispatch later.
  // Thunk middleware knows how to turn thunk async actions into actions.

  return function (dispatch) {
    return fetchSecretSauce().then(
      sauce => dispatch(makeASandwich(forPerson, sauce)),
      error => dispatch(apologize('The Sandwich Shop', forPerson, error))
    );
  };
}

// Thunk middleware lets me dispatch thunk async actions
// as if they were actions!

store.dispatch(
  makeASandwichWithSecretSauce('Me')
);

上記のコードは、はるかに簡潔かつ直感的に記述できます。

fetchSecretSauce().then(
  sauce => store.dispatch(makeASandwich('Me', sauce)),
  error => store.dispatch(apologize('The Sandwich Shop', forPerson, error))
)

私の質問は、どのようなニーズがredux-thunkを満たすことであり、上記の例と同様に既存のソリューションでどのように改善されるかです。

javascriptreactjstypescriptreact-reduxredux-thunk
20
micahblu

Reduxサンクは、実際に機能する特別な種類のアクションを認識するようReduxに教えます。

アクション作成者が関数を返すと、その関数はRedux Thunkミドルウェアによって実行されます。この関数は純粋である必要はありません。したがって、非同期API呼び出しの実行などの副作用が発生する可能性があります。関数はアクションをディスパッチすることもできます。

サンクは、アクションのディスパッチを遅らせるため、または特定の条件が満たされた場合にのみディスパッチするために使用できます。

Reduxサンクミドルウェアが有効な場合、アクションオブジェクトの代わりに関数をディスパッチしようとすると、ミドルウェアはディスパッチメソッド自体を最初の引数としてその関数を呼び出します。

そして、Reduxがそのような「特別な」アクションクリエーター（サンクアクションクリエーターと呼ぶ）を認識するように「教えた」ため、通常のアクションクリエーターを使用する任意の場所でそれらを使用できるようになりました。

ダン・アブラモフ自身からのこの素晴らしい答えをチェックしてください、それはすべてをカバーします： https://stackoverflow.com/a/35415559/57149

詳細については、次のリンクも確認してください。

https://github.com/gaearon/redux-thunk#motivationhttp://redux.js.org/docs/advanced/AsyncActions.html

15
Mo Ismat