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

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

Patricia Arquette

풀어 주다： 2024-12-01 05:08:15

원래의

843명이 탐색했습니다.

How to Dispatch a Redux Action After a Timeout?

시간 초과가 있는 Redux 액션 디스패치

Redux로 작업할 때 지정된 지연 후 액션 디스패치와 같은 비동기 이벤트 처리는 알림, 타이머 표시에 유용할 수 있습니다. 및 기타 시간에 민감한 기능.

setTimeout 및 콜백 사용 기능

가장 간단한 접근 방식은 내장된 JavaScript 함수인 setTimeout과 콜백 함수를 사용하는 것입니다.

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

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

로그인 후 복사

Thunk 미들웨어 사용(권장)

Redux Thunk 미들웨어를 사용하면 다른 작업을 순차적으로 반환하는 함수를 전달합니다. 이를 통해 비동기 작업이 가능하고 부작용에 대한 더 나은 제어가 가능합니다.

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

로그인 후 복사

디스패치 thunk:

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

로그인 후 복사

Thunk의 상태 읽기

Thunk 작업 생성자는 Redux Thunk에서 제공하는 getState 함수를 사용하여 저장소의 현재 상태에 액세스할 수 있습니다. 이를 통해 상태에 따라 작업을 조건부로 실행할 수 있습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!