redux-sagas 콜백 (aka sagas 및 setState)

Question

사용자가 양식을 제출할 때 양식로드 상태 (회 전자 아이콘, 입력 사용 중지)를 설정하고 작업 완료 또는 실패시 해당 상태를 지우려고합니다. 현재 나는 몇 가지 이유에 대한 성가신 작업 창조자와 감속기를 만드는 작업이 포함됩니다 내 가게,이 상태를 저장하고 :

1. 그것은 단순히 그것은 이유가 더 어렵다 this.setState
2. 를 호출하는 것보다 훨씬 더 많은 일입니다 대한
3. 난 정말 내 가게에서 지역 구성 요소 상태를 저장하지 않으

는 기본적으로 나는 내 양식 구성 요소 내에서이 작업을 수행 할 수 :

handleFormSubmitted() { 
    this.setState({ isSaving: true }) 
    this.props.dispatchSaveForm({ formData: this.props.formData }) 
    .finally(() => this.setState({ isSaving: false })) 
} 

Answer 1

당신은 redux-saga로 할 수 없습니다. 당신이 거기에서하려고하는 것은 redux-saga의 기본 원칙에 어긋납니다.

redux-saga

은 ... 앱에서 무슨 일이 일어나고 있는지 설명 이벤트 등의 작업을 처리하여 반응을 목표로 그래서 다른 무용담 (보통 "전문가들은" take를 사용) 또는 rootReducer는 해당 작업/이벤트를 구독 할 수있는 무엇 할 필요가 ... 때문에의

redux-saga -unlike redux-thunk 및 redux-promise 그 - 당신이 파견은 파견하고, 감속기 때 REDUX 사가 함께, 그래서 ... dispatch 방법의 동작을 변경하지 않습니다 및 무용담은 파견 된 활동에 가입되어 있습니다. 그러나 dispatch 메서드는 다른 미들웨어/저장소 확장자를 사용할 때와 같이 약속을 반환하지 않습니다.

따라서 redux-saga의 나머지 양식은 요청이 완료되거나 오류가 발생할 때마다 (put 효과 사용) 작업을 보내어 양식의 요청이 완료되었음을 알리는 유일한 방법입니다. 따라서 특정 작업이 전달되면 구성 요소 내부에서 어떻게 직접 알 수 있습니까?

커넥터 구성 요소로 자체 미들웨어를 만들거나 별도의 구성 요소를 사용하지 않는 한 구성 요소 내부의 구체적인 동작을 구독 할 수있는 방법이 없습니다.

물론, redux 저장소를 보유하기 위해 컨텍스트에 직접 액세스 할 수 있습니다. 그러면 the redux subscribe method을 직접 사용할 수 있지만 수신기 기능은 전달 된 작업을 알려주지 않습니다. 액션 (액션)이 발송 될 때 호출됩니다 ... 상태의 일부 속성이 변경되었는지 확인할 수는 있지만 미친 것일 수 있습니다. 그래서, 당신이 그 길을 내려가고 싶지 않다면, 그것은 미친 짓입니다 : 당신은 redux-saga를 사용해서 그것을 할 수 없습니다.

(IMHO는별로 좋은 생각이 아닙니다.) 이와 비슷한 일을하고 싶다면 redux-saga를 사용하지 않으면됩니다.

REDUX 사가 사용의 요점은 여기에 파견에서 응답을 듣는 대신에, 사이드 effects``에 관한

handleFormSubmitted() { 
    this.setState({ isSaving: true }) 
    yourFetchCall({ formData: this.props.formData }) 
    .then(payload => this.props.dispatchFormSaved(payload)) 
    .catch(error => this.props.dispatchSavingFormErrored(error)) 
    .finally(() => this.setState({ isSaving: false })) 
}