시간 초과로 Redux 작업을 전달하는 방법은 무엇입니까?

시간 초과가 있는 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;
    }

    // ...
  };
}

추천

귀하의 요구 사항을 충족하는 가장 간단한 접근 방식을 사용하세요. 썽크는 고급 비동기 기능을 제공하지만 모든 경우에 필요한 것은 아닙니다.

위 내용은 시간 초과로 Redux 작업을 전달하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!