시간 제한이 있는 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)지금까지 우리는 미들웨어나 기타 고급 개념을 사용하지 않았습니다.
비동기 액션 생성자 추출
위 방법은 간단한 경우에는 잘 작동하지만 몇 가지 문제가 있을 수 있습니다.
이러한 문제를 해결하려면 함수를 추출하고 시간 초과 논리를 중앙 집중화하며 이 두 작업을 디스패치해야 합니다. 아래와 같이:
// 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
