如何在超時情況下調度 Redux 操作？-js教程-PHP中文網

如何在超時情況下調度 Redux 操作？

Linda Hamilton

發布： 2024-12-06 20:10:17

原創

626 人瀏覽過

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);

登入後複製

解決方案：提取非同步操作創建者

為了避免重複和競爭條件，請考慮提取操作創建者：

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

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

登入後複製

然後在組件中使用：

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

登入後複製

解決方案：使用Thunk 中介軟體

Thunk 中介軟體提供了更大的彈性。它使您能夠調度返回操作的函數：

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

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

登入後複製

然後您可以直接調度 thunk 操作創建者：

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

登入後複製

Thunk 中的閱讀狀態

Thunkunk也是允許您讀取當前狀態store:

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

    // ...
  };
}

登入後複製