Redux: 여러 비동기 호출을 기다리는 redux 관용구는 무엇입니까?

Redux Thunk 미들웨어를 사용한다고 가정합니다.

액션 제작자를 선언합니다.

import 'babel-core/polyfill'; // so I can use Promises
import fetch from 'isomorphic-fetch'; // so I can use fetch()

function doSomething() {
  return dispatch => 
    fetch(
      '/api/something'
    ).then(
      response => response.json()
    ).then(
      json => dispatch({ type: DO_SOMETHING, json }),
      err => dispatch({ type: SOMETHING_FAILED, err })
    );
}

function doSomethingElse() {
  return dispatch => 
    fetch(
      '/api/something'
    ).then(
      response => response.json()
    ).then(
      json => dispatch({ type: DO_SOMETHING_ELSE, json }),
      err => dispatch({ type: SOMETHING_ELSE_FAILED, err })
    );
}

썽크 액션 생성자 내부에서 함수의 반환 값으로 체인을 유지하여 맨 끝에 Promise 를 반환하는 방법에 주목하십시오. 이렇게하면 다음과 같이 할 수 있습니다.

store.dispatch(doSomething()).then(() => {
  console.log('I did something');
});

Redux Thunk를 사용하는 경우 dispatch 는 썽크 작업 생성자 (이 경우 Promise)에서 반환 한 함수의 반환 값을 반환합니다.

이렇게하면 Promise.all() 와 같은 조합자를 사용하여 여러 작업이 완료 될 때까지 기다릴 수 있습니다.

Promise.all([
  store.dispatch(doSomething()),
  store.dispatch(doSomethingElse())
]).then(() => {
  console.log('I did everything!');
});

그러나 이전 액션 제작자의 _composition_ 역할을 할 다른 액션 제작자를 정의하고 내부적으로 Promise.all 사용하는 것이 좋습니다.

function doEverything() {
  return dispatch => Promise.all([
    dispatch(doSomething()),
    dispatch(doSomethingElse())
  ]);
}

이제 그냥 쓸 수 있습니다

store.dispatch(doEverything()).then(() => {
  console.log('I did everything!');
});

행복한 파견!

@gaearon promise 미들웨어보다 thunk 을 선호하는 특별한 이유가 있습니까? 또는 언제 무엇을 사용해야하는지에 대한 조언? 감사.

특별한 이유는 없습니다. 저는 그것에 대해 더 잘 알고 있습니다.
둘 다 시도하고 가장 적합한 것을 사용하십시오!

알겠습니다, 감사합니다!

JFYI :)

원하는 경우 https://github.com/Cron-J/redux-async-transitions 살펴볼 수 있습니다.

@gaearon 빠른 질문-위의 예를보고 전화하십시오.

store.dispatch(doSomething()).then(() => {
  console.log('I did something');
});

— doSomething 거부 된 경우에도 "I did something"블록이 히트하는 것처럼 보입니다. 오류를 잡은 후 doSomething 체인에서 오류를 다시 던지지 않기 때문입니다. 의도적입니까? 그렇지 않은 경우-대신 오류를 다시 발생시키는 경우-호출자에서 다시 처리 하시겠습니까?

그것은 단지 예일뿐입니다. 저는 이것을 보는 방법으로서, 이것이 결정적인 참조라는 의미가 아닙니다. 나는 그것에 대해 진지하게 생각하지 않았다.

액션 제작자로부터 약속을 반환하는 방법을 알고 있으며 나머지는 귀하에게 달려 있습니다. 오류를 다시 던질 지 여부와 처리 위치는 모두 귀하에게 달려 있습니다. 이것은 실제로 Redux의 문제가 아니므로 내 조언은 다른 사람만큼 좋습니다.

감사합니다! 그것이 사실이라고 생각했지만 내가 간과 한 마법이 없는지 확인하고 싶었습니다.

Redux는 사용자 정의가 가능하기 때문에 dispatch 반환 값이 예상되는 약속이라고 보장 할 수 없습니다.

실제로 redux-loop를 사용했기 때문에 실생활에서 한 가지 문제가 발생했습니다. 래핑 된 Promise (https://github.com/raisemarketplace/redux-loop/blob/master/modules/effects.js#L38)를 반환하도록 dispatch 을 조정합니다. 따라서 dispatch 의 반환 값에 의존 할 수 없습니다.

글쎄, Dan이이 스레드에서 위에서 말했듯이 : 그것은 _your_ 앱이고, _you_는 당신의 액션 제작자를 작성하고 있습니다. 그래서 _you_ 그들이 무엇을 반환할지 결정하십시오.

@markerikson dispatch 반환 값은 미들웨어가 조정할 수 있으므로 액션 생성자의 반환 값이 될 수 있습니다.

그러나 해결 방법이 있습니다. 대신 체인의 then 에 dispatch(actonCreator()) , 우리가 할 수에 체인 actionCreator() .

예, 미들웨어는 조정할 수 있지만 내 요점은 _you_가 자신의 앱에서 미들웨어를 설정하고 있다는 것입니다. :)

@gaearon 님 , 빠른 (관련된) 질문입니다! 같은 일에 대한 당신의 견해는 무엇입니까?

function fetchDataBWhichDependsOnA() {
  return dispatch => {
    dispatch(fetchDataA())
      .then(() => {
        fetch('/api/get/data/B')
          .then(dispatch(receiveDataB(response.data)))
      })
  }
}

이 코드 조각에는 2 개의 중첩 된 비동기 작업이 있지만 작동하지만 테스트하는 데 문제가 있습니다. fetchDataA() 에는 비동기 호출 수준이 1 개만 있기 때문에 테스트 할 수 있습니다. 그러나 fetchDataBWhichDependsOnA() 대한 테스트를 작성하려고 할 때 then 블록의 store 에서 가장 업데이트 된 값을 검색 할 수 없습니다.

@timothytong 약속을 반환하지 않습니다. dispatch 및 중첩 된 fetch 호출에서 결과를 반환하면 전체 체인이 해결 될 때까지 테스트에서 기다릴 수 있습니다.

@johanneslumpe 좋은 캐치, 고마워 친구! 이제 남은 것은 이것이 허용 가능한지 여부에 대한 질문입니다. 비동기 가져 오기 체인으로 데이터 종속성을 처리합니까?

나는 같은 문제가 있었고 30 분 동안 해결책을 찾기 위해 노력했습니다. 이 구현은 아직 완료되지 않았지만 제대로 진행되고있는 것 같습니다.

https://github.com/Sailias/sync-thunk

내 생각은 그것이 그들을을 채우고 체인 작업을 호출하는지도를 참조해야하지 않을 경우 구성 요소가 채워 특정 REDUX 상태를 요청할 수 있다는 것입니다 then . 체인의 각 작업은 데이터를 전달할 필요가 없으며 종속 작업이 데이터를 채웠을 때 상태에서 데이터를 가져올 수 있습니다.

@gaearon

Promise.all([
  store.dispatch(doSomething()),
  store.dispatch(doSomethingElse())
]).then(() => {
  console.log('I did everything!');
});

이것에 대한 질문이 있습니다. 너무 기본적인 경우 죄송합니다.

이 시나리오에서는 두 번의 디스패치가 있습니다. 즉, 구성 요소가 두 번 렌더링됩니다. 그러나 구성 요소가 두 데이터 모두 의미있는 것을 표시하기를 원하면 어떻게해야할까요?

따라서이 시나리오에서는 구성 요소가 한 번만 렌더링되기를 원하며 이때 모든 비동기 작업이 완료됩니다.

redux-batched-subscribe 및 redux-batched-actions 와

이것이 유효한 시나리오라면이를 처리하기 위해 제안 된 접근 방식은 무엇입니까?

@jintoppy 구성 요소를 렌더링하기 위해 여러 번 호출하지 않으려면 Promise.all 솔루션이 도움이되지 않습니다. doSomething() and doSomething() 모두 상태 변경을 트리거하고 구성 요소 렌더링을 유발하는 모든 디스패치 데이터 때문입니다.

@jintoppy 왜 상황을 처리하기 위해 middlwares가 필요합니까?
그런 짓을하는 데 방해가되는 것은 무엇입니까?

// action creator
function fetchAB() {
  return dispatch => {
    const fetchA = fetch( 'api/endpoint/A' );
    const fetchB = fetch( 'api/endpoint/B' );
    return Promise.all([ fetchA, fetchB ])
      .then( values => dispatch(showABAction(values)) )
      .catch( err => throw err );
  }
} 

모든 요청을 하나의 액션 생성자에 넣고 모든 요청이 해결 된 후에 만 ​​액션 디스패치를 ​​실행할 수 있습니다. 이 경우 감속기가 호출되어 상태가 한 번만 변경되었으므로 render ()도 한 번만 실행될 것입니다.

@apranovich :이 접근 방식에 문제가 하나 있습니다. 이제 단일 작업에서 여러 가져 오기를 결합해야합니다. 그래서 만약 내가 10 개의 비동기 호출을 가지고 있다면, 모든 것을 하나의 액션에 넣어야합니다. 또한 나중에 이러한 10 개의 비동기 호출 중 하나를 트리거하려면 어떻게해야합니까? 이 접근 방식에서 기본적으로 모든 비동기 논리는 단일 작업에 있습니다.

유용한 정보에 대해 모두 감사합니다. 빠른 질문, 어떻게 동일한 결과를 얻을 수 있지만 한 페치가 다음 페치 메서드에 필요한 데이터를 반환 할 때입니다. 예를 들어, 위치의 날씨를 가져 오기 위해 다음 fetch 에 필요한 ID (첫 번째 fetch )를 얻기 위해 지리적 위치를 입력하는 무료 날씨 API 엔드 포인트가 있습니다. 이것이 이상한 사용 사례라는 것을 알고 있지만 유사한 상황을 처리하는 방법을 알고 싶습니다. 미리 감사드립니다!

안녕하세요 @gaearon ,이 질문에 대한 귀하의 리뷰를 받고 싶습니다. 두 개의 API에 대해 중첩 된 비동기 호출을해야합니다. 두 번째 API의 응답은 첫 번째 API의 응답에 따라 다릅니다.

export const getApi=()=>{
        return(d)=>{
        axios({
            method:'GET',
            url:Constants.URLConst+"/UserProfile",
            headers:Constants.headers
        }).then((response)=>{
            return d({
                type:GET_API_DATA,
                response,
                axios({
                    method:'GET',
                    url:Constants.URLConst+"/UserProfileImage?enterpriseId="+response.data.ProfileData.EnterpriseId,
                    headers:Constants.headers
                }).then((response1)=>{
                    return d({
                        type:GET_PROFILE_IMAGE,
                        response1
                    })
                })
            })
        }).catch((e)=>{
            console.log("e",e);
        })
    }

}

위와 같은 것을 시도했지만 작동하지 않습니다. 그리고 내 프로젝트에서는 두 API의 응답을 독립적으로 사용해야합니다.
그렇다면 올바른 방법은 무엇입니까?

감사.

@ c0b41 , 업데이트 된 질문을 확인하십시오.

안녕하세요 @ c0b41 , 이것은 두 번째 axios 호출에서 구문 오류를 제공합니다.

@ aayushis12 , @ c0b41 : 이것은 도움말 포럼이 아닌 버그 추적기입니다. Stack Overflow 또는 Reactiflux에서이 질문을해야합니다. 더 많은 사람들이 질문을보고 도울 수있을 것입니다.

그것을 경험하는 사람들을 위해

나는 모든 것을했다

모든 비동기 호출이 해결되기 전에 인쇄됩니다. 비동기 작업 생성자로부터 문이나 표현식을 반환하는지 확인합니다.

예를 들어 doSomethingElse() 가 화살표 함수에서 {}로 선언 된 경우

function doSomethingElse() {
  return dispatch => {
    fetch(
      '/api/something'
    ).then(
      response => response.json()
    ).then(
      json => dispatch({ type: DO_SOMETHING_ELSE, json }),
      err => dispatch({ type: SOMETHING_ELSE_FAILED, err })
    );
  }
}

doSomethingElse() 해결되기 전에 "I did everything"이 인쇄됩니다. => 뒤에 {}을 삭제하여이 문제를 해결하세요.

@gaearon 하나의 질문, https://github.com/reduxjs/redux/issues/723#issuecomment -139927639에 따라 두 개의 작업이 전달 될 때까지 기다리는 작업을 전달해야하는 경우 어떻게 처리할까요 _AND_ 상태 그 행동 때문에 변한 건가요? 작업이 발송되었지만 then 내부의 작업이 _before_ 상태가 변경되기 전에 실행되는 경우가 있습니다. redux-thunk 있습니다.

@enmanuelduran : 댄은 더 이상 적극적인 관리자가 아닙니다. 제발 그를 핑하지 마세요.

코드를 보지 않고 질문에 답하기는 어렵지만 우리의 문제는 실제로 토론 포럼이 아닙니다. Stack Overflow에 질문을 게시하면 더 좋을 것입니다. 더 나은 답변을 더 빨리 얻을 수 있습니다.

@markerikson 오, 죄송합니다. 내 의도가 아니 었습니다. 누군가 관심이 있다면 stackoverflow에 질문을 만들었습니다. https://stackoverflow.com/questions/51846612/dispatch-an-action-after-other-specific-actions-were- 파견 및 상태 변경

많은 사람들에게 감사합니다.