3

我有一个使用 Redux、redux-thunk、react-router 和 redux-api-middleware 的 React 应用程序。

为了让我的应用程序中的页面组件能够呈现，我必须访问两个 API 端点并将它们的结果存储在 redux 存储中。

目前，我同时调度这两个动作。当一个动作的结果在另一个动作之前完成时，这会导致问题。因此，我需要确保在发送第二个操作之前完成一个操作。

在阅读了所有文档后，我无法理解如何使用 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}
      }]
    }
  })
}
4

1 回答 1

0

创建第三个名为getSettingsThenPage.

export const getSettingsThenPage = (
  projectSlug,
  env,
  menuSlug = "",
  pageSlug = ""
) => dispatch => {
  return dispatch(getSettings(projectSlug, env)).then(() => {
    return dispatch(getPage(projectSlug, env, menuSlug, pageSlug));
  });
};

在任何需要的地方调用该操作。

于 2018-11-08T22:19:25.967 回答