asynchronous - redux-api-middleware を使用した非同期アクションの連鎖

Question

Redux、redux-thunk、react-router、redux-api-middleware を使用した React アプリがあります。

アプリのページ コンポーネントをレンダリングするには、2 つの API エンドポイントにアクセスし、その結果を redux ストアに保存する必要があります。

現在、両方のアクションを同時にディスパッチしています。これにより、あるアクションの結果が他のアクションよりも先に完了すると、問題が発生します。したがって、2 つ目のアクションをディスパッチする前に、1 つのアクションが完了していることを確認する必要があります。

すべてのドキュメントを読んだ後、redux-api-middleware でこれを実現する方法を理解するのに苦労しています。

これは私の現在のコンポーネントです:

class Page extends React.Component {
  static prepareState = (dispatch: Function, match: Match) => {
    const { params: { projectSlug, menuSlug, pageSlug, env } } = match
    if (!projectSlug || !env) {
      return
    }

    dispatch(getSettings(projectSlug, env))
    dispatch(getPage(projectSlug, env, menuSlug || '', pageSlug || ''))            

  }
  ...

私が試してみました：

class Page extends React.Component {
  static prepareState = (dispatch: Function, match: Match) => {
    const { params: { projectSlug, menuSlug, pageSlug, env } } = match
    if (!projectSlug || !env) {
      return
    }

    dispatch(
     dispatch(getSettings(projectSlug, env))
   ).then(res => {
     console.log('success', res)
     dispatch(getPage(projectSlug, env, menuSlug || '', pageSlug || ''))
   }).catch(e => {
     console.log('failure', e, menuSlug, pageSlug)
   })

  }
  ...

catchしかし、これはの代わりに が呼び出されることにつながりthenます。ただし、GET_SETTINGS_SUCCESS アクションは実際には完了しているため、catch が呼び出される理由がまったくわかりません。私は何を間違っていますか？

これはアクションジェネレーターです:

export const getSettings = (projectSlug: string, env: string) => (dispatch: Function, getState: Function) => {
  if (getState().settings[env] && loadCompleted(getState().settings.apiState)) {
    // already loaded
    return
  }

  dispatch({
    [CALL_API]: {
      endpoint: settingsUrl(projectSlug, env),
      method: 'GET',
      credentials: 'include',
      types: [{
        type: 'GET_SETTINGS',
        meta: {projectSlug, env}
      }, {
        type: 'GET_SETTINGS_SUCCESS',
        meta: {projectSlug, env}
      }, {
        type: 'GET_SETTINGS_FAIL',
        meta: {projectSlug, env}
      }]
    }
  })
}