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

시간 제한이 있는 Redux 액션을 보내는 방법은 무엇입니까?

문제:

시간 초과 메커니즘을 사용하여 내 앱의 알림 상태를 업데이트해야 합니다. 알림은 일반적으로 오류 또는 메시지입니다. 알림이 표시되지 않도록 알림 상태를 초기 상태로 되돌리려면 5초 후에 다른 작업을 보내야 합니다. 가장 큰 이유는 5초 후에 알림이 자동으로 사라지는 기능을 제공하기 위해서입니다.

setTimeout을 사용하고 다른 액션을 반환하려고 시도했지만 성공하지 못했고 온라인에서 관련 메서드를 찾지 못했습니다. 나는 어떤 제안이라도 시도해 볼 의향이 있습니다.

답변:

모든 연산을 함수 라이브러리에 작성하는 습관에만 국한될 필요는 없습니다. JavaScript에서 시간 제한을 사용하려면 setTimeout을 사용하세요. Redux 작업에도 동일한 원칙이 적용됩니다.

Redux 는 비동기 이벤트 처리를 위한 대안을 제공하지만, 코드 중복이 너무 많다고 판단되는 경우에만 이러한 방법을 사용해야 합니다. 이러한 문제가 발생하지 않는 한 언어에서 제공하는 옵션을 사용하고 가장 간단한 솔루션을 추구하세요.

비동기 코드 인라인 작성

이것이 가장 쉬운 방법입니다. 여기서는 Redux 관련 방법이 사용되지 않습니다.

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

연결된 구성 요소에서도 동일한 작업이 수행됩니다.

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

유일한 차이점은 저장소 자체는 일반적으로 연결된 구성 요소에서 액세스할 수 없지만 주입을 통해 얻습니다. props를 dispatch() 또는 특정 작업 생성자에게 전달합니다. 그러나 우리에게는 아무런 차이가 없습니다.

동일한 액션을 다른 구성 요소로 보낼 때 오타를 방지하려면 액션 개체를 인라인으로 보내는 대신 액션 생성자를 추출할 수 있습니다.

// actions.js
export function showNotification(text) {
  return { type: 'SHOW_NOTIFICATION', text }
}
export function hideNotification() {
  return { type: 'HIDE_NOTIFICATION' }
}

// component.js
import { showNotification, hideNotification } from '../actions'

this.props.dispatch(showNotification('You just logged in.'))
setTimeout(() => {
  this.props.dispatch(hideNotification())
}, 5000)

또는, 이전에는 connect()를 통해 바인딩되었습니다.

this.props.showNotification('You just logged in.')
setTimeout(() => {
  this.props.hideNotification()
}, 5000)

지금까지 우리는 미들웨어나 기타 고급 개념을 사용하지 않았습니다.

비동기 액션 생성자 추출

위 방법은 간단한 경우에는 잘 작동하지만 몇 가지 문제가 있을 수 있습니다.

• 알림을 표시하려는 위치마다 이 논리를 복제해야 합니다.
• 두 개의 알림을 표시할 만큼 빠르면 해당 알림에는 ID가 없으므로 경쟁 조건이 발생합니다. 첫 번째 제한 시간이 만료되면 HIDE_NOTIFICATION을 잘못 전달하여 두 번째 알림을 조기에 숨깁니다.

이러한 문제를 해결하려면 함수를 추출하고 시간 초과 논리를 중앙 집중화하며 이 두 작업을 디스패치해야 합니다. 아래와 같이:

// actions.js
function showNotification(id, text) {
  return { type: 'SHOW_NOTIFICATION', id, text }
}
function hideNotification(id) {
  return { type: 'HIDE_NOTIFICATION', id }
}

let nextNotificationId = 0
export function showNotificationWithTimeout(dispatch, text) {
  // 为通知分配 ID，这样 reducer 就可以忽略不当前可见通知的 HIDE_NOTIFICATION。
  // 或者，我们可以存储超时 ID 并调用 clearTimeout()，但是我们仍然需要在一个地方执行此操作。
  const id = nextNotificationId++
  dispatch(showNotification(id, text))

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

이제 구성 요소는 이 논리를 반복하거나 다른 알림과 경쟁 조건을 갖지 않고 showNotificationWithTimeout을 사용하여 알림을 표시할 수 있습니다.

// component.js
showNotificationWithTimeout(this.props.dispatch, 'You just logged in.')

// otherComponent.js
showNotificationWithTimeout(this.props.dispatch, 'You just logged out.')    

showNotificationWithTimeout() 디스패치를 ​​허용하는 이유 첫 번째 매개변수로? 왜냐하면 작업을 상점으로 보내야 하기 때문입니다. 구성 요소는 일반적으로 디스패치에 액세스할 수 있지만 외부 함수가 디스패치 작업을 제어하기를 원하므로 제어권을 부여해야 합니다.

모듈에서 단일 스토어를 내보낸 경우 이를 가져와서 그 안에서 직접 보내기 작업을 수행할 수 있습니다.

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

간단해 보이지만 이 방법은 권장하지 않습니다. . 우리가 이것을 좋아하지 않는 주된 이유는 스토어를 싱글톤으로 강제하기 때문입니다. 이로 인해 서버 측 렌더링 구현이 매우 어려워집니다. 서버 측에서는 각 요청마다 고유한 저장소가 있어서 여러 사용자가 서로 다른 미리 로드된 데이터를 얻을 수 있기를 원합니다.

단일 매장에서는 테스트가 더욱 어려워집니다. 특정 모듈에서 내보낸 특정 실제 상점을 참조하기 때문에 액션 생성자를 테스트할 때 더 이상 상점을 모의할 수 없습니다. 외부에서 상태를 재설정할 수도 없습니다.

따라서 기술적으로 모듈에서 단일 매장을 내보낼 수는 있지만 그렇게 하지 않는 것이 좋습니다. 앱이 서버측 렌더링을 추가하지 않을 것이라고 확신하지 않는 한 이 작업을 수행하지 마세요.

이전 버전으로 돌아가기:

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

이렇게 하면 중복 논리 문제가 해결되고 경쟁 조건이 방지됩니다.

Thunk 미들웨어

간단한 애플리케이션의 경우 위의 방법으로 충분합니다. 이에 만족한다면 미들웨어에 대해 걱정하지 마십시오.

그러나 대규모 애플리케이션에서는 몇 가지 불편함을 느낄 수 있습니다.

예를 들어 파견을 넘기는 것은 안타까운 일입니다. 위에서 설명한 대로 Redux 작업을 비동기적으로 보내는 모든 구성 요소는 디스패치를 ​​추가로 전달할 수 있도록 prop으로 받아들여야 하기 때문에 컨테이너와 프레젠테이션 구성 요소를 분리하기가 더 어려워집니다. showNotificationWithTimeout()은 실제로 액션 생성자가 아니기 때문에 더 이상 connect()를 사용하여 액션 생성자를 바인딩할 수 없습니다. Redux 작업을 반환하지 않습니다.

또한 어떤 함수가 동기 작업 생성자(예: showNotification())이고 어떤 함수가 비동기 도우미 함수(예: showNotificationWithTimeout())인지 기억하는 것이 번거로울 수 있습니다. 서로 다른 방식으로 사용해야 하며 서로 혼동하지 않도록 주의해야 합니다.

여기서 우리는 도우미 함수에 이 패턴을 제공하고 Redux가 이러한 비동기 액션 생성자를 다른 기능에 대한 완전한 동기 부여가 아닌 일반 액션 생성자의 특별한 경우로 "처리"하도록 돕는 방법을 찾습니다.

여전히 이 문제가 자신의 애플리케이션에 존재한다고 주장하고 생각한다면 Redux Thunk 미들웨어를 사용해 보세요.

간단히 말해서 Redux Thunk는 Redux가 실제로 함수인 특수한 유형의 작업을 인식하도록 가르칩니다.

// actions.js
export function showNotification(text) {
  return { type: 'SHOW_NOTIFICATION', text }
}
export function hideNotification() {
  return { type: 'HIDE_NOTIFICATION' }
}

// component.js
import { showNotification, hideNotification } from '../actions'

this.props.dispatch(showNotification('You just logged in.'))
setTimeout(() => {
  this.props.dispatch(hideNotification())
}, 5000)

이 미들웨어가 활성화되면 함수를 보내는 경우 , Redux Thunk 미들웨어는 디스패치를 ​​매개변수로 전달합니다. 또한 이러한 작업을 "먹기"하므로 리듀서가 이상한 함수 인수를 받는 것에 대해 걱정하지 마세요. 리듀서는 직접 전송되거나 방금 설명한 대로 함수에 의해 전송된 일반 객체 작업만 수신합니다.

쓸모 없을 것 같죠? 이 특별한 경우에는 그렇지 않습니다. 하지만 이를 통해 showNotificationWithTimeout()을 일반 Redux 액션 생성자로 선언할 수 있습니다.

this.props.showNotification('You just logged in.')
setTimeout(() => {
  this.props.hideNotification()
}, 5000)

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