タイムアウトを伴う Redux アクションをディスパッチするにはどうすればよいですか?

タイムアウトのある Redux アクションのディスパッチ

問題

通知を管理し、エラーや有益なアラートなどのメッセージを表示する Redux アプリケーションがあるとします。一定時間 (たとえば 5 秒) が経過すると、これらの通知を自動的に消去したいとします。

解決策: インライン非同期コード

最も簡単な方法は、setTimeout を直接使用することです:

store.dispatch({ type: 'SHOW_NOTIFICATION', text: 'You logged in.' });
setTimeout(() => {
  store.dispatch({ type: 'HIDE_NOTIFICATION' });
}, 5000);

解決策: Async Action Creator の抽出

重複や競合状態を避けるために、アクションを抽出することを検討してください。作成者:

function showNotificationWithTimeout(dispatch, text) {
  const id = nextNotificationId++;
  dispatch(showNotification(id, text));

  setTimeout(() => {
    dispatch(hideNotification(id));
  }, 5000);
}

コンポーネントで使用します:

showNotificationWithTimeout(this.props.dispatch, 'You just logged in.');

解決策: サンク ミドルウェアを使用する

サンク ミドルウェアを使用すると、柔軟性が高まります。これにより、アクションを返す関数をディスパッチできます:

export function showNotificationWithTimeout(text) {
  return function (dispatch) {
    const id = nextNotificationId++;
    dispatch(showNotification(id, text));

    setTimeout(() => {
      dispatch(hideNotification(id));
    }, 5000);
  };
}

サンク アクション作成者を直接ディスパッチできます:

this.props.dispatch(showNotificationWithTimeout('You just logged in.'));

サンクで状態を読み取る

サンクもの現在の状態を読み取ることができます。ストア:

export function showNotificationWithTimeout(text) {
  return function (dispatch, getState) {
    if (!getState().areNotificationsEnabled) {
      return;
    }

    // ...
  };
}

推奨事項

ニーズを満たす最もシンプルなアプローチを使用してください。サンクは高度な非同期機能を提供しますが、すべての場合に必要なわけではありません。

以上がタイムアウトを伴う Redux アクションをディスパッチするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。