時間制限のある Redux アクションを実装するにはどうすればよいですか?

タイムアウトを指定して Redux アクションをディスパッチする方法?

Redux では、setTimeout を使用して別のアクションをディスパッチして、通知状態を返すことができます一定時間が経過すると初期状態に戻ります。こうすることで、指定した時間間隔が経過すると通知が自動的に消えます。

インライン JavaScript の使用

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

Async Action Creator の抽出

インラインアプローチを使用してコードの重複や競合状態が発生した場合は、非同期アクションの抽出を検討してください。 Creator.

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

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

サンク ミドルウェアの使用

複雑なアプリの場合は、Redux Thunk ミドルウェアを使用するとよいでしょう。これにより、Redux が関数をアクション クリエーターとして認識できるようになり、それらの関数内でディスパッチと getState へのアクセスが提供されます。

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

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

store.dispatch(showNotificationWithTimeout('You logged in.'));

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

サンク アクション クリエーター内では、 getState を使用してストアの現在の状態を読み取ることができます。これは、現在の状態に基づいてアクションを条件付きでディスパッチする場合に役立ちます。

showNotificationWithTimeout(dispatch, getState) {
  if (!getState().areNotificationsEnabled) {
    return;
  }
  // ... continue with action-dispatching logic
}

多くのシナリオでは単純なインライン JavaScript で十分であるため、これらの手法は必要な場合にのみ使用してください。

以上が時間制限のある Redux アクションを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。