Flux에서 구성 요소의 성공 여부를 어떻게 감지하고 대응할 수 있습니까?

예를 들어 사용자가 리소스를 만들어야합니다. '만들기'버튼을 클릭하면 API에 데이터를 전송하는 작업이 호출됩니다. 자원이 성공적으로 작성되면 "성공"조치를 전달하십시오. 그렇지 않으면 "실패"조치를 전달하십시오.Flux에서 구성 요소의 성공 여부를 어떻게 감지하고 대응할 수 있습니까?

구성 요소가 Flux에서 성공 또는 실패에 어떻게 반응합니까? 구성 요소에서 읽은 저장소에서 성공/실패 플래그를 설정해야합니까? 성공/실패를 위해 구성 요소에 자체 청취자와 함께 상점에서 개별 이벤트를 방출해야합니까?

더 구체적으로 말하면 "성공"에서 생성 된 리소스로 라우팅하고 싶습니다. "실패"에 대한 특정 대화 상자를 열려면 어떻게합니까? 구성 요소에서 어떻게 할 수 있습니까?

저는 모범 사례를 파악하려고합니다.

감사합니다!

출처

2017-05-04 Kevin Lee

정확히 어떻게하는지는 사용하는 Flux 구현에 따라 다릅니다. 그러나 처리 방법은 다소 다를 수 있습니다.

일반적으로 Flux 구현에서 저장소를 구성 요소 소품에 연결할 수 있으므로 저장소가 업데이트 될 때마다 상점에 연결하면 갱신 된 상점 값을 가져옵니다. 따라서 저장소에 대한 모든 종류의 변경 사항을 처리하려면 구성 요소를 저장소에 연결하고 component update methods을 사용하여 구성 요소가 저장소의 변경 사항을 감지하도록해야합니다. 예를 들어

, 당신은 API 호출의 성공/실패에 응답하려는 경우, 당신은 어떻게 할 것인지가 상점에 다음과 같은 것이다 : 당신은 당신이 플럭스 어떤 라이브러리를 사용하는 것이

{ 
    ... 
    runningApiRequest: //boolean value 
    apiRequestResult: //whatever your API returns 
    ... 
}

을 실제 API 요청 액션을 호출하는 구성 요소를 만드는 데 사용하면 apiRequestSucceeded 및 apiRequestResult을 소품으로받습니다. 이이 작업을 수행 할 수있는 유일한 방법은 아니다, 물론

componentDidUpdate(prevProps, prevState) { 
    if (!prevProps.runningApiRequest && this.props.runningApiRequest) { 
     // request started 
     this.showLoadingIndicator() 
    } 
    if (prevProps.runningApiRequest && !this.props.runningApiRequest) { 
     // request finished, handle success or failure 
     this.handleRequestResult(this.props.apiRequestResult) 
    } 
}

하지만 플럭스 저장소에 변경 내용을 처리하는 것은 항상 같은 기본적인 빌딩 블록에 내려 올 것이다 : 구성 요소에서는 다음을 구현할 수 접선 상점에 소품을 보내고 수명주기 방법에서 소품에 대한 변경 사항을 처리 할 수 있습니다.

출처

2017-05-05 01:36:57

Flux에서 구성 요소의 성공 여부를 어떻게 감지하고 대응할 수 있습니까?

답변

관련 문제