Timed Redux 작업을 구현하는 방법은 무엇입니까?

시간 초과가 있는 Redux 액션을 디스패치하는 방법?

Redux에서는 setTimeout을 사용하고 다른 액션을 디스패치하여 알림 상태를 반환할 수 있습니다. 일정 시간이 지나면 초기 상태로 돌아갑니다. 이렇게 하면 지정된 시간 간격이 지나면 알림이 자동으로 사라집니다.

인라인 JavaScript 사용

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

비동기 액션 생성기 추출

인라인 접근 방식을 사용하여 코드 중복이나 경합 상태가 발생하는 경우 비동기 작업 추출을 고려하세요. creator.

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

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

Thunk 미들웨어 사용

복잡한 앱의 경우 Redux Thunk 미들웨어를 사용할 수 있습니다. 이를 통해 Redux는 함수를 액션 생성자로 인식하고 해당 함수 내에서 dispatch 및 getState에 대한 액세스를 제공합니다.

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

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

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

Thunks의 상태 읽기

썽크 액션 생성자 내에서, getState를 사용하여 상점의 현재 상태를 읽을 수 있습니다. 이는 현재 상태에 따라 조건부로 작업을 디스패치하는 데 유용합니다.

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

많은 시나리오에서 간단한 인라인 JavaScript로 충분할 수 있으므로 이러한 기술은 필요한 경우에만 사용하십시오.

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