시간 초과로 Redux 작업을 전달하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

시간 초과로 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);

로그인 후 복사

해결책: Async Action Creator 추출

중복 및 경쟁 조건을 피하려면 액션 추출을 고려하세요. 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.');

로그인 후 복사

해결책: Thunk 미들웨어 사용

Thunk 미들웨어는 더 많은 유연성을 제공합니다. 작업을 반환하는 함수를 디스패치할 수 있습니다.

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

로그인 후 복사

Thunks에서 상태 읽기

Thunks도 현재 상태를 읽을 수 있습니다. 매장:

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

    // ...
  };
}

로그인 후 복사