Redux: 비동기 작업을 연결하는 방법은 무엇입니까?

안녕! 이것은 문제 추적기이며 지원 포럼이 아닙니다. SO와 달리 여기에서 답을 잃어버리기 때문에 다음 번에 StackOverflow에 질문해 주셔서 감사합니다.

즉, Redux Thunk 미들웨어로 스토어를 생성하면 다음과 같이 비동기 작업 생성기를 작성할 수 있습니다.

// If you use Redux Thunk...
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
const store = createStore(reducer, applyMiddleware(thunk))

// You can define asynchronous action creators that return functions.
// We call such action creators "thunks":

export function getUser(id) {
  // Redux Thunk will inject dispatch here:
  return dispatch => {
    // Reducers may handle this to set a flag like isFetching
    dispatch({ type: 'GET_USER_REQUEST', id })

    // Perform the actual API call
    return fetchUser().then(
      response => {
        // Reducers may handle this to show the data and reset isFetching
        dispatch({ type: 'GET_USER_SUCCESS', id,  response })
      },
      error => {
        // Reducers may handle this to reset isFetching
        dispatch({ type: 'GET_USER_FAILURE', id,  error })
        // Rethrow so returned Promise is rejected
        throw error
      }
    )
  }
}

// Thunks can be dispatched, if Redux Thunk is applied,
// just like normal action creators:
store.dispatch(getUser(42));

// The return value of dispatch() when you dispatch a thunk *is*
// the return value of the inner function. This is why it's useful
// to return a Promise (even though it is not strictly necessary):
store.dispatch(getUser(42)).then(() =>
  console.log('Fetched user and updated UI!')
)

// Here is another thunk action creator.
// It works exactly the same way.
export function getPost(id) {
  return dispatch => {
    dispatch({ type: 'GET_POST_REQUEST', id })
    return fetchPost().then(
      response => dispatch({ type: 'GET_POST_SUCCESS', id,  response }),
      error => {
        dispatch({ type: 'GET_POST_FAILURE', id,  error })
        throw error
      }
    )
  }
}

// Now we can combine them
export function getUserAndTheirFirstPost(userId) {
  // Again, Redux Thunk will inject dispatch here.
  // It also injects a second argument called getState() that lets us read the current state.
  return (dispatch, getState) => {
    // Remember I told you dispatch() can now handle thunks?
    return dispatch(getUser(userId)).then(() => {
      // Assuming this is where the fetched user got stored
      const fetchedUser = getState().usersById[userId]
      // Assuming it has a "postIDs" field:
      const firstPostID = fetchedUser.postIDs[0]
      // And we can dispatch() another thunk now!
      return dispatch(getPost(firstPostID))
    })
  }
}

// And we can now wait for the combined thunk:
store.dispatch(getUserAndTheirFirstPost(43)).then(() => {
  console.log('fetched a user and their first post')
})

// We can do this anywhere we have access to dispatch().
// For example, we can use this.props.dispatch, or put action
// creators right into the props by passing them to connect, like this:
// export default connect(mapStateToProps, { getUserAndTheirFirstPost })

이것을 FAQ에 넣어야 합니다.

이 문제를 다음과 같이 해결했습니다. 수정 작업 없이. Promise 구성 요소를 넣었습니다.

  clickShowUserEvent(data) {
   Promise.resolve(data.userAuth(data.login, data.password)) // dispatch
    .then(function (response) {
      data.showEvents(); //dispatch
      return response;
    })
    .then(function(response){console.log("@RESPONSE",response);data.show(data)})
  }

이것이 올바른 결정입니까?

이것은 역시 작동하며 어떤 패턴을 사용할지는 당신에게 달려 있습니다.

@ar53n React 컴포넌트의 promise가 있는 패턴에는 몇 가지 결함이 있습니다.

• 오류 처리가 없습니다( 위의 예 에서), 즉 catch 부분입니다. 처리되지 않은 거부를 받을 수 있습니다.
• 구성 요소가 마운트 해제되거나 앱 상태를 변경하는 일부 작업이 발생하는 경우와 같이 중단할 수 없습니다.
• 그 상태는 암시적입니다. 부작용은 별도의 논의이지만 적어도 앱 상태에서 실행 중인 프로세스의 추적이 있으면 유용할 것입니다.

@sompylasar 감사합니다 John은 귀하의 의견에 감사드립니다. 간단한 작업을 수정하고 싶지 않습니다. Authentication 및 GetEvents 2개의 간단한 작업이 있습니다. 이는 2개의 비동기 요청이며 catch 도 포함합니다. 구성 요소를 클릭하면 이 작업만 호출됩니다.
예

export function userAuth(login, password) {
  return (dispatch, getState) => {
    console.log('STATE', getState())
    let newState = dispatch(requestUserAuth(login, password))
    return fetch(AUTH_URL + newState.queryParams, MY_INIT)
      .then(response => response.json())
      .then(function (json) { dispatch(receiveUserAuth(json)); return json})
      .catch(error => dispatch(errorUserAuth(error)))
  }
}

그리고 우리는 이것을 가지고 있습니다

내가 틀렸다면 지적해 주세요. 감사합니다.

@ar53n 그러면 문제가 해결되고 상점에서 프로세스가 추적됩니다. 구성 요소의 무중단 프로세스 문제는 여전히 적용되지만 구성 요소 또는 작업 썽크에서 시작한 경우에는 그다지 중요하지 않을 수 있습니다.

@ar53n redux-dataloader 를 살펴볼 수도 있습니다.
복잡한 체인 비동기 작업을 위해 설계되었습니다.
도움이 되기를 바랍니다!

여기에 게시된 몇 가지 가능한 솔루션이 있으므로 이것을 닫습니다. 요즘 redux-saga를 살펴보고 싶을 수도 있습니다!

@gaearon 님 의 예시는 쉬는 시간 여행을 하고 있지 않습니까?

예를 들어 AJAX 호출이 처음에 실패한 다음 서버 측을 수정하고 다시 실행하려고 합니다.

@gaearon 귀하의 솔루션을 시도했지만 모든 구성 요소에서 store.dispatch(...) 를 호출하려고 할 때(제 경우에는 승인 요청을 수행하기 위해 LoginComponent에서) 다음 오류가 발생했습니다.

undefined is not an object (evaluating '_AppNavigator.AppNavigator.router')

뭔가 잘못된 것 같습니다. 다음과 같이 액션 생성기를 설정했습니다.

// actions.tsx
export const ActionCreators = {
    authenticate: (username: string, password: string) => {
        return (dispatch) => {
            return auth.login(username, password).then(
                response => {
                    dispatch(navActionCreators.login(res))
                    return response
                },
                error => {
                    throw error
                }
            )
        }
    }
}

// LoginScreen.tsx (login method)
store.dispatch(authActions.authenticate(this.state.username, this.state.password))
  .then((res) => {
     this.setState({isLoading: false})
   })
   .catch((error: Error) => {
     this.setState({
       isLoading: false,
       error: error ? error.message : 'Si è verificato un\' errore.'
     })
   })

내가 무엇을 놓치고 있습니까?

@bm-software: 대신 스택 오버플로에서 해당 질문을 해야 합니다.

@ar53n 및 @sompylasar 오랜 시간이 지났지만 지금은 이 패턴으로 어려움을 겪고 있습니다. 귀하의 예에서 @ar53n userAuth fetch $가 실패하면 userAuth 가 호출되는 체인에서 어떤 일이 발생합니까?

.catch(error => dispatch(errorUserAuth(error))) 가 errerUserAuth 작업을 전달하는 것처럼 보입니다. 훌륭합니다. Redux에서 이것은 일반적으로 오류를 "처리"하는 방법입니다. 그러나 앞서 언급한 체인에서:

clickShowUserEvent(data) {
   Promise.resolve(data.userAuth(data.login, data.password)) // dispatch
    .then(function (response) {
      data.showEvents(); //dispatch
      return response;
    })
    .then(function(response){console.log("@RESPONSE",response);data.show(data)})
  }

data.showEvents() 는 사용자 인증이 실패하더라도 _항상_ 호출됩니다. 나는 그것이 대부분의 사람들이 기대하거나 원하는 것이라고 생각하지 않지만 Redux의 오류 처리는 일반적으로 re-throw가 아닌 ​​디스패치로 수행되기 때문에 오류를 삼키므로 약속 체이닝이 예상대로 작동하지 않습니다.

또한 다시 던지면 _어디서나 앱의 모든 단일 작업 생성자 호출에서 .catch() 를 해야 합니다. 모든 오류를 다시 던진 위의 @gaearon 예제는 마지막에 다음을 수행합니다.

// And we can now wait for the combined thunk:
store.dispatch(getUserAndTheirFirstPost(43)).then(() => {
  console.log('fetched a user and their first post')
})

getUserAndTheirFirstPost 내부의 큰 결합 체인에서 _anything_이 실패하면 "처리되지 않은 약속 거부" 오류가 발생합니다.

유일한 답은 모든 곳에서 다시 던진 다음 .catch() 를 다시 던지거나 React 16 오류 경계를 사용하는 것이라고 생각합니다.

@jasonrhodes

clickShowUserEvent(data) {
   Promise.resolve(data.userAuth(data.login, data.password)) // dispatch
    .then(function (response) {
      data.showEvents(); //dispatch

data.showEvents() 는 사용자 인증이 실패하더라도 _항상_ 호출됩니다.

아니요, data.userAuth(data.login, data.password) 가 결국 거부되는 약속을 반환하면 호출되지 않습니다. .then 에 대한 첫 번째 인수는 약속이 이행될 때 호출되고( onFulfilled 라고 함), 두 번째 인수는 약속이 거부될 때 호출됩니다( onRejected ) – 사양 참조 .

반면에 React 16 오류 경계는 promise에 도움이 되지 않으며 React 내부 상태가 깨지지 않도록 동기적으로 발생한 예외만 catch합니다.

@jasonrhodes 또한 Promise 세계의 좋은 시민이 되십시오. 호출자에게 약속을 반환하거나(그런 다음 오류를 처리해야 함) .catch 를 첨부(그리고 약속이 생성된 오류를 처리)합니다.

귀하의 예는 아무 것도하지 않습니다.

clickShowUserEvent(data) {
   Promise.resolve(data.userAuth(data.login, data.password)) // dispatch
    .then(function (response) {
      data.showEvents(); //dispatch
      return response;
    })
    .then(function(response){console.log("@RESPONSE",response);data.show(data)})
  }

@sompylasar 그것은 내 예가 아니라 이 스레드의 앞부분에서 응답했던 것입니다. 시간이 많이 지났다는 것을 알고 있지만 Google 검색을 통해 이 스레드를 두 번 이상 접했기 때문에 여기에서 이전 대화를 참조했습니다.

다시 보면 userAuth fetch 호출이 실패하더라도 data.showEvents() 는 _항상_ 호출됩니다. 왜요? userAuth 함수 내부에 Redux 방식으로 오류를 처리하는 .catch() 가 있기 때문입니다.

이것이 내 게시물의 요점입니다. 비동기 작업에서 오류를 포착하여 오류 작업을 전달할 때 더 이상의 약속 체인이 올바르게 작동하지 않도록 삼키고 방지합니까? 아니면 "처리되지 않은 약속 거부"를 피하기 위해 무엇을 하든 해당 작업 작성자의 모든 호출자를 다시 던지고 강제로 .catch() 하시겠습니까?

또한 내 경험에 따르면 누군가를 사양에 연결하기 전에 누군가가 알고 있는 것을 이해하는 것이 좋습니다. 응답해 주셔서 감사합니다. 제가 파헤친 오래된 대화라는 것을 알고 있지만 얼마나 놓치기 쉬운지 알 수 있듯이 중요한 대화입니다!

@jasonrhodes

@sompylasar 그것은 내 예가 아니라 이 스레드의 앞부분에서 응답했던 것입니다. 시간이 많이 지났다는 것을 알고 있지만 Google 검색을 통해 이 스레드를 두 번 이상 접했기 때문에 여기에서 이전 대화를 참조했습니다.

알겠습니다. 죄송합니다. 전체 맥락을 기억하지 못했습니다.

userAuth 함수 내부에 Redux 방식으로 오류를 처리하는 .catch() 가 있기 때문입니다.

알겠습니다. 그러면 이것이 의도한 대로 작동하거나 해당 약속을 반환하고 호출 사이트에서 오류를 처리하는 경우 .catch 를 거기에 두어서는 안 됩니다. 그렇지 않으면 $ .catch 내에 오류를 다시 던져야 합니다.

어쨌든 썽크 자체는 연결에 적합하지 않습니다. 썽크 내부에서 연결하거나 보다 복잡한 비동기식 워크플로에 sagas를 사용해야 합니다.

나는 잠시 동안 약속 사슬을 깨는 문제에 매달렸습니다. 일반적으로 내 작업 작성자는 썽크에서 반환된 동일한 http 요청의 .then()에서 SUCCESS 작업을 내보내거나 .catch()에서 FAILURE 작업을 내보냅니다.

내 작업 생성자가 catch 블록으로 이동하고 내가 this.props.myActionCreator().then(() => ) 을 할 때마다 then 내부의 코드는 요청에 문제가 있더라도 실행됩니다.

이를 설명하기 위해 저는 항상 해당 작업 생성자의 FAILURE 사례에 설정된 앱 상태의 오류 변수를 확인했습니다. 그러나 여러 액션 제작자, 특히 다른 사람에게 의존하는 제작자를 호출하면 상황이 복잡해집니다. 많은 오류 변수를 확인하는 if 문이 있어야 했습니다.

액션 생성자 반환 값에 대한 catch 블록에서 오류를 다시 throw하여 약속 체인을 깨뜨리지 않는다는 사실이 마음에 듭니다. 그러나 이를 위해서는 액션 생성자가 호출되는 React 구성 요소에서 .catch()를 사용해야 합니다. 오류 변수가 감속기에서 FAILURE 작업을 처리하여 이미 설정되어 있기 때문에 해당 catch 블록에 아무 것도 작성하지 않을 것입니다.

@jasonrhodes , @sompylasar 여러분, 다시 던지는 접근 방식을 사용하고 React 구성 요소에서 작업 생성자 호출의 약속 체인에 빈 .catch() 블록을 배치하는 것이 좋습니다.

@nbkhope 솔직히 말해서 이것이 Redux의 가장 큰 문제였으며 지금까지 좋은 답을 찾지 못했습니다. 더 도움이 되지 못해 죄송합니다!

여러분, 이 기사에서 썽크 대안을 찾을 수 있습니다. https://decembersoft.com/posts/what-is-the-right-way-to-do-asynchronous-operations-in-redux/

@gaearon

첫 번째 답변과 관련하여 약속 대신 비동기 및 대기를 사용하는 경우 어떻게 변환해야 합니까? 다음과 같은 것:

export const funcA = () => {
    return async (dispatch) => {
        const data = await doSomething(...)
        dispatch({ action: DID_SOMETHING, payload: data })
    }
}

export const funcB = () => {
    return async (dispatch) => {
        const data = await doSomethingElse(...)
        dispatch({ action: DID_SOMETHING_ELSE, payload: data })
    }
}

export const funcC = () => {
    return async (dispatch) => {
        const data = await doSomethingMore(...)
        dispatch({ action: DID_SOMETHING_MORE, payload: data })
    }
}

// how to chain funcA, funcB and funcC
const myFunc = () => {
    // execute funcA
    // when complete execute funcB
    // when complete execute funcC
}

@yingdongzhang 다음과 같이 연결할 수 있습니다.

const myFunc = () => {
  return async (dispatch) => {
    try {
      await dispatch(funcA())
      await dispatch(funcB())
      await dispatch(funcC())
    } catch (error) {
      //error handling
    }
  }
}

@Boomxx 감사합니다 예상대로 작동합니다.

fetch all posts of the user 을 어떻게 해야 하는지 궁금합니다.

@km16 : 이것은 지원 시스템이 아닌 버그 추적기입니다. 사용법에 관한 질문은 Stack Overflow 또는 Reactiflux를 사용하여 도와줄 준비가 된 더 많은 사람들이 있습니다. 더 나은 답변을 더 빨리 얻을 수 있습니다. 감사 해요!