web-dev-qa-db-ja.com

reduxでsetTimeoutとdispatcherを使用して定期的なアクションを実行する方法

定期的にアクションをディスパッチする方法/場所は？再帰的なsetTimeoutを使用してカウントダウンを行います。

例から、次のようなものがあります。

// Can also be async if you return a function
export function incrementAsync() {
  return dispatch => {
    (function _r() {
      setTimeout(() => {
        // Yay! Can invoke sync or async actions with `dispatch`
        dispatch(increment());
        _r();
      }, 1000);
    })();
  };
}

それで、これは良い考えですか、それともミドルウェアを使用したり、どこかからアクションを作成したりするなど、この問題に対するより良いアプローチがありますか？

私はこれの一般的なバージョンを好みます。そこでは、ストアを介してタイマーの開始/停止を制御できます。

サンプル実装をセットアップしました。ご覧ください https://Gist.github.com/eguneys/7023a114558b92fdd25e

javascriptreactjsfluxredux
18
eguneys

少し複雑ですが、あなたが提案するアプローチは問題ありません。一般に、コンポーネントのライフサイクルメソッド内に間隔を設定し（例：componentDidMount/componentWillUnmount）、他のアクションに間隔を設定するアクションを回避します。

この柔軟性がどうしても必要な場合は、非同期管理に Rx を使用し、監視可能なチェーンの最後にアクションをdispatch使用することをお勧めします。このように、Reduxを使用して（同期更新）、非同期構成をRxに任せます。

17
Dan Abramov

この質問をカバーした素晴らしい 中程度の投稿 があります。

そこでGustavo Machadoは、componentDidMount/componentWillMountソリューションとdispatchinreduxオプションの両方の例を示しています。

それは私を助けたので、あなたはそれをチェックしたいかもしれません。

0
YanivGK