Redux Thunk 同步动作不同步

Question

我正在为我正在构建的应用程序使用 React/Redux，并且我正在尝试实施一个操作来注销用户。我的应用程序具有可以编辑的工件。我希望我的应用程序首先保存工件，然后注销用户，这将清除商店。我使用 Redux Thunk 实现了如下：

export function logoutUser(artifact) {
  return (dispatch) => {
    dispatch(saveArtifact(artifact))
      .then(() => {
        dispatch(requestLogout());
        return axios.get(`${API_BASE}/auth/logout`)
          .then(() => dispatch(logoutSuccess()))
          .catch(error => dispatch(logoutFailure(error)));
      });
  };
}

我希望这可以保存工件，并且只有在保存后，才将用户注销。我的保存操作本身调用另一个操作，它在保存工件后加载工件，但这无关紧要。它应该返回一个承诺，然后才继续注销用户。

但是，事实并非如此。出于某种原因，我收到多个调用来保存工件（验证它们来自此函数），然后调用异步发生，因此加载工件是最后一次，因此我的 redux 存储在注销时不会被清除。

如果有人能提供一些关于为什么会发生这种情况以及我如何解决它的见解，我会很高兴。

附加信息：

我正在清除我的 root reducer 中的 redux 存储，如下所示：

const rootReducer = (state, action) => {
  let newState = state;
  if (action.type === types.LOGOUT_SUCCESS) {
    newState = undefined;
  }

  return appReducer(newState, action);
};

我将工件保存如下：

function sendSaveArtifactRequest(artifact) {
  if (artifact._id == null) {
    const artifactWithoutId = _.omit(artifact, ['_id']);
    return axios.post(`${API_BASE}/artifacts`, artifactWithoutId)
      .then(result => result.data);
  }

  return axios.put(`${API_BASE}/artifacts`, artifact).then(() => artifact);
}

export function saveArtifact(artifact) {
  return (dispatch) => {
    dispatch(requestSaveArtifact());

    return sendSaveArtifactRequest(artifact)
      .then(data => dispatch(saveArtifactSuccess(data)))
      .catch(error => dispatch(saveArtifactFailure(error)))
      .then(() => dispatch(loadArtifacts()));
  };
}

我正在按如下方式加载工件：

function sendArtifactsRequest() {
  return new Promise((resolve, reject) => {
    axios.get(`${API_BASE}/artifacts`)
      .then(result => resolve(result.data))
      .catch(error => reject(error));
  });
}

export function loadArtifacts() {
  return (dispatch) => {
    dispatch(requestArtifacts());

    return sendArtifactsRequest()
      .then(data => dispatch(loadArtifactsSuccess(data)))
      .catch(error => dispatch(loadArtifactsFailure(error)));
  };
}

Answer 1

我发现了问题，您的 saveArtifact 操作中有多个链式承诺。在您的情况下发生了什么，在 sendSaveArtifactRequest 承诺解决之后您发送 requestLogout 并在成功后您清除 redux 状态。但另一方面，仍有待处理的承诺，您无需等待logoutUser 行动中的解决方案。当您清除 redux 存储时，您未决的承诺将得到解决，并再次更新 redux 状态。 你可以在这里做两件事：

• 在调度 saveArtifact 时使用 Promise.all().then()，然后调度注销操作。
• 您可以在loadArtifacts 操作中注销用户，但我不确定具体的用例，可能这不符合您的应用要求。但它总是会在加载工件时调用。

最重要的是，请将 Redux DevTools 集成到您的应用中，以便您可以跟踪调度操作的顺序。

在你的store.js

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

import rootReducer from './reducers';

const enhancer = compose(
  applyMiddleware(thunk),
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
);

export default createStore(rootReducer, enhancer);

`