タイムアウトを伴う Redux アクションをディスパッチするにはどうすればよいですか?-jsチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-12-06 20:10:17

オリジナル

627 人が閲覧しました

How to Dispatch Redux Actions with Timeouts?

タイムアウトのある 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;
    }

    // ...
  };
}

ログイン後にコピー