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ありがとうジョンコメントありがとうございます。 単純なアクションを変更したくないだけです。 2つの単純なアクションAuthenticationとGetEventsがあります。これは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これで問題はなく、エラーが処理され、ストアでプロセスが追跡されます。 コンポーネントでの中断のないプロセスの問題は引き続き当てはまりますが、コンポーネントまたはアクションサンクで開始した場合は、おそらくそれほど重要ではありません。

@ar53nredux -dataloaderもご覧ください。
複雑なチェーン非同期アクション用に設計されています。
それが役に立てば幸い！

ここにいくつかの可能な解決策が掲載されているので、これを締めくくります。 最近では、redux-sagaも調べてみてください。

@gaearonあなたの例の休憩時間旅行はそうではありませんか？

たとえば、AJAX呼び出しが最初に失敗した後、サーバー側を修正してやり直したいということです。

@gaearon私はあなたの解決策を試しましたが、任意のコンポーネントから（私の場合はLoginComponentから承認要求を行うために） store.dispatch(...)を呼び出そうとすると、次のエラーが発生しました：

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：その質問は、代わりにStackOverflowで行う必要があります。

@ ar53nと@sompylasarは久しぶりですが、今はこのパターンに苦労しています。 あなたの例の@ar53nで、$＃$ 1 fetch userAuthが失敗した場合、 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のエラー処理は通常、再スローではなくディスパッチによって行われるため、エラーを飲み込んで、promiseチェーンが期待どおりに機能しません。

また、再スローを行うと、_アプリ内のすべてのシングルアクションクリエーターの呼び出しで、どこでも.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()を使用するか、React16のエラー境界を使用することだと思います。

@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と呼ばれます）、2番目の引数は約束が拒否されたときに呼び出されます（ onRejectedと呼ばれます）–仕様を参照してください。

一方、React 16のエラー境界は、Promiseには役立ちません。同期的にスローされた例外をキャッチするだけで、Reactの内部状態が壊れないようにします。

@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それは私の例ではありませんでした、それはあなたがこのスレッドの前半で応答していたものでした。 久しぶりですが、グーグル検索でこのスレッドに何度も出くわしたので、ここで以前の会話を参考にしていました。

もう一度見てください。 userAuth fetch呼び出しが失敗した場合でも、 data.showEvents()は_常に_呼び出されます。 なんで？ userAuth .catch()があるため、Reduxの方法でエラーを処理します。エラーアクションをディスパッチします。

これが私の投稿のポイントです。非同期アクションからエラーをキャッチしてエラーアクションをディスパッチできるようにするとき、それ以上のpromiseチェーンが正しく機能しないように飲み込んでしまいますか？ または、「未処理の約束の拒否」を回避するために、そのアクションクリエーターのすべての呼び出し元を再スローして、 .catch()に強制しますか？

また、私の経験では、仕様にリンクする前に、誰かが知っていることを理解することをお勧めします。 返信ありがとうございます。私が掘り下げた古い会話だと思いますが、見逃しやすいので重要な会話です。

@jasonrhodes

@sompylasarそれは私の例ではありませんでした、それはあなたがこのスレッドの前半で応答していたものでした。 久しぶりですが、グーグル検索でこのスレッドに何度も出くわしたので、ここで以前の会話を参考にしていました。

了解しました。申し訳ありませんが、コンテキスト全体を思い出せませんでした。

userAuth .catch()があるため、Reduxの方法でエラーを処理します。エラーアクションをディスパッチします。

了解しました。これは意図したとおりに機能するか、その約束を返す場合（および呼び出しサイトでエラーを処理する場合）に.catchをそこに置くべきではないか、 .catch内でエラーを再スローする必要があります。ダウンストリームpromiseを拒否する

とにかく、サンク自体は連鎖にはあまり適していません。 サンク内でチェーンするか、より複雑な非同期ワークフローにはsagasを使用する必要があります。

私はしばらくの間、約束の連鎖を断ち切るというその問題に悩まされてきました。 通常、私のアクションクリエーターは、サンクから返される同じhttpリクエストの.then（）でSUCCESSアクションを発行するか、.catch（）でFAILUREアクションを発行します。

アクションクリエーターがcatchブロックに移動し、 this.props.myActionCreator().then(() => )を実行すると、リクエストに問題があったとしても、then内のコードが実行されます。

それを説明するために、私は常に、そのアクション作成者のFAILUREケースで設定されたアプリ状態のエラー変数をチェックするようにしました。 しかし、複数のアクションクリエーター、特に他のクリエーターに依存しているクリエーターに電話をかけると、事態は厄介になります。 多くのエラー変数をチェックするifステートメントが必要でした。

アクション作成者の戻り値のcatchブロックでエラーを再スローすることで、promiseチェーンを壊さないという事実が気に入っています。 ただし、そのためには、アクション作成者が呼び出されるReactコンポーネントの.catch（）を使用する必要があります。 エラー変数はレデューサーでのFAILUREアクションの処理によってすでに設定されているため、そのcatchブロックには何も書き込まれません。

では、 @ jasonrhodes 、 @ sompylasarは、再スローアプローチを使用し、Reactコンポーネントのアクションクリエーター呼び出しのpromiseチェーンに空の.catch（）ブロックを配置することをお勧めしますか？

@nbkhope正直なところ、これはReduxでの私の最大の問題であり、今日まで私は良い答えを見つけていません。 これ以上役に立たないことをお詫びします！

皆さん、この記事でいくつかのサンクの代替案を見つけることができますhttps://decembersoft.com/posts/what-is-the-right-way-to-do-asynchronous-operations-in-redux/

@gaearon

あなたの最初の答えに関して、promiseの代わりにasync＆awaitを使用している場合、どのように変換すればよいですか？ 次のようなもの：

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を使用してください。多くの人があなたを助けてくれる準備ができています。おそらく、より良い答えがより早く得られるでしょう。 ありがとう！