Reded에서 Reducer 함수를 순차적으로 호출하는 호출 상태

Question

Redux를 배우고 있고, 다른 브랜치 (브랜치 B)를 업데이트하기 전에 내 상태 트리의 브랜치 (A 브랜치)가 업데이트를 완료했는지 확인하는 것과 관련된 문제가 있습니다. 지점 B는 지점 A에서 새로 업데이트 된 항목에 할당 된 ID에 따라 달라 지므로 지점 A의 업데이트 기능이 전달 된 후 지점 B의 업데이트 기능이 전달되도록합니다. 나는 여러 가지 지류에 해당하는 여러 가지 감속기를 가지고 있으며 결합 리 듀서를 사용하여 결합합니다.

나는 구성 요소에서 지점 A를 업데이트하는 작업을 파견하려면 다음을 사용 :

/* update Branch A */ 
this.props.dispatch(actions.addCriterion(this.state)); 

순차적으로 지점 B에서 코드 결과 업데이트 된 상태 정보를보고하지 않는 다음 줄에 지점 B를 업데이트 작업을 파견 지점 A의 파견으로 인해

/* update Branch B */ 
this.props.dispatch(actions.completeScoreGrid(this.props.alternatives, this.props.criteria)); 

그러나, 모든 것을 내가에서는 setTimeout을 사용하고 후 비트가 전달됩니다 기다리면 상태 업데이트가 완료되고이 경우 B를 호출하기 전에 원하는대로 작동 B의 참조의 모든 그것을해야

/* update Branch B after a 1 second pause */  
    var that = this; 
    setTimeout(function() { 
     that.props.dispatch(actions.completeScoreGrid(that.props.alternatives, 
    that.props.criteria)); 
    }, 1000); 

그러나 설정 타임 아웃을 사용하는 것이 적절한 방법이 아니라고 확신합니다. 나는 redux-thunk, redux-promise, redux-promise-middleware 및 redux-saga로 보았습니다. 그리고이 중 어떤 것이이 문제에 대해 적절한 도구인지 또는 그 중 어느 것이 적절한 도구인지 확인하지 못했습니다. . 이런 종류의 문제를 해결하는 올바른 방법은 무엇입니까?

Answer 1

나는 thunk-redux를 사용하여 문제를 해결하고 위의 Brandon Lewis의 게시물을 대답으로 표시했습니다.

또한 Reddit 사용자 cyex가 내 Reddit 게시물에 게시 한 또 다른 기법으로이 같은 질문을합니다. 나는 그것을 시험했고, 또한 내가 성취하고자했던 것을했다. 나는 그의 해결책을 여기에 붙여 넣었을뿐만 아니라 아래의 게시물에 링크했다.

Link to Reddit post on this question

당신은 당신의 톱니 모양을 게시 할 수 있습니까? 새로운 국가가 두 번째 호출에 반영되지 않을 것이라고 올바르게 말하지 않습니다. 또한 지점 B가 지점 A의 새 항목에 할당 된 ID에 종속되어 있다고 말할 때 ... 감속기 또는 작업 작성자에서이 ID를 생성하고 있습니까? 예 : 코드가 이와 같이 보이면 어떻게 될까요?

/* update Branch A */ 
var newCriterion = actions.addCriterion(this.state); // ID is assigned here, not in reducer 
this.props.dispatch(newCriterion); 

/* update Branch B */ 
var scoreGrid = actions.completeScoreGrid(this.props.alternatives, this.props.criteria, newCriterion.id); 
this.props.dispatch(scoreGrid); 
So the B reducer doesn't need to look at anything on another branch. 

Answer 2

여기에서 문제는이 작업을 전달한 구성 요소 내부의 criteria 소품이 업데이트 할 기회가 없다는 것입니다. 그러나 상태 원자 내부의 기준 값은 이미 업데이트되었습니다. 내가 더 설명 할 수있게 해줘.

는의 코드 Line 1이 줄을 부르 자 : this.props.dispatch(actions.addCriterion(this.state));

과의 코드 Line 2이 줄을 부르 자 : Line 1 후 this.props.dispatch(actions.completeScoreGrid(this.props.alternatives, this.props.criteria));

가 완료된는 REDUX 상태 원자의 criteria 새로운 기준을 포함합니다. 그러나 criteria 소품이 Line 2에 아직 반영되지 않았습니다. React가 redux 상태 변경에 대한 응답으로 구성 요소를 아직 업데이트하지 않았기 때문입니다.

어떻게 해결할 수 있습니까? 몇 가지 방법이 있지만 여기에 내 제안이 있습니다. this.props.criteria을 completeScoreGrid 작업 작성자에게 전달하는 대신 redux-thunk를 사용하여 비동기 작업을 활성화하고 비동기 작업 작성자 내부의 redux 상태 아톰에서 조건을 가져올 수 있습니다. state.criteria에 기준을 저장한다고 가정 할 때 비동기 액션 제작자가 볼 수있는 방법은 다음과 같습니다.

function completeScoreGrid(alternatives) { 
    return (dispatch, getState) => { 
    const state = getState(); 
    const criteria = state.criteria; 
    dispatch({ 
     type: 'COMPLETE_SCORE_GRID', 
     payload: { 
     criteria, 
     alternatives 
     } 
    }); 
    } 
} 

그런 다음이 작업에 대한 응답으로 지점 B를 업데이트 할 수 있습니다. 궁금한 점이 있으면 알려주세요.