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

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

Redux を使用する場合、指定した遅延後にアクションをディスパッチするなどの非同期イベントを処理すると、通知やタイマーの表示に役立ちます。 、およびその他の時間に依存する機能。

setTimeout と Callback の使用関数

最も簡単な方法は、組み込みの JavaScript 関数 setTimeout とコールバック関数を使用することです。

store.dispatch({ type: 'SHOW_NOTIFICATION', message: 'Success!' });

setTimeout(() => {
 store.dispatch({ type: 'HIDE_NOTIFICATION' });
}, 5000); // Set a timeout of 5 seconds

サンク ミドルウェアの使用 (推奨)

Redux サンク ミドルウェアを使用すると、他のアクションを順番に返す関数をディスパッチすることができます。これにより、非同期アクションと副作用の制御が可能になります。

npm を使用してミドルウェアをインストールします:

npm install --save redux-thunk

Redux ストア構成内:

import thunk from 'redux-thunk';

const store = createStore(
  reducer,
  applyMiddleware(thunk)
);

サンクを定義します。ディスパッチ関数を引数:

export const showNotificationWithTimeout = (message) => (dispatch) => {
  const id = uniqueID();

  dispatch({ type: 'SHOW_NOTIFICATION', id, message });

  setTimeout(() => {
    dispatch({ type: 'HIDE_NOTIFICATION', id });
  }, 5000);
};

サンクのディスパッチ:

store.dispatch(showNotificationWithTimeout('Success!'));

サンクでの状態の読み取り

サンク アクションの作成者は、提供されている getState 関数を使用してストアの現在の状態にアクセスできます。 Reduxサンク著。これにより、状態に基づいたアクションの条件付き実行が可能になります。

export const showNotificationWithTimeout = (message) => (dispatch, getState) => {
  const enabled = getState().settings.notificationsEnabled;

  if (enabled) {
    const id = uniqueID();
    dispatch({ type: 'SHOW_NOTIFICATION', id, message });

    setTimeout(() => {
      dispatch({ type: 'HIDE_NOTIFICATION', id });
    }, 5000);
  }
};

結論

Redux でのタイムアウトを伴うアクションのディスパッチは、setTimeout 関数とコールバック関数を使用するか、Redux Thunk を利用することで実現できます。ミドルウェア。サンクは、非同期アクションをより詳細に制御し、状態に基づいた条件付き実行を可能にします。複雑な非同期シナリオの場合は、Redux Saga や Redux Loop などのより高度なソリューションの使用を検討してください。

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