动作应该有多个分派还是单独调用?react + Redux

Should Actions Have Multiple Dispatches or Call Separately? ReactJs + Redux

本文关键字：调用 单独 react Redux 分派      更新时间：2023-09-26

假设我有一个"添加"项的按钮。如果一切顺利，将发出一个ajax请求，该项目将被添加到页面中，并显示一条成功消息。

会有2个分派事件发生

Create
Notification

但是这些事件应该触发什么呢?

假设我的组件中有这个方法在onClick

上执行
  validate() {
        if (this.state.storageName === "" && this.state.sharingKey == "") {
            console.log("validation error");
            return false;
        }
        this.props.createNewStorage(this.state);
        this.props.setNotifer(true);
    }

现在CreateNewStorage看起来像这样

export function createNewStorage(storage) {
    return function (dispatch) {
        dispatch({ type: actions.NEW_STORAGE_CREATED, payload: storage });
    };
}

setNotifer 

export function setNotifer(success) {
    return function (dispatch) {
        dispatch({ type: actions.SET_NOTIFIER, payload: success });
        setTimeout(() => dispatch({ type: actions.CLOSE_NOTIFIER }), 1000);
    };
}

我现在有什么(调用CreatenewStorage和setNotifier)将工作，但当我实际做一个ajax请求调用他们像这样不会工作的CreatenewStorage可能需要一段时间返回成功，而setNotifier将已经启动。

这就引出了我在哪里进行多个分派?

1

方式

export function createNewStorage(storage) {
    return function (dispatch) {
        dispatch({ type: actions.NEW_STORAGE_CREATED, payload: storage });
dispatch({ type: actions.SET_NOTIFIER, payload: success });
        setTimeout(() => dispatch({ type: actions.CLOSE_NOTIFIER }), 1000);
    };
2

方式

   export function createNewStorage(storage) {
        return function (dispatch) {
            dispatch({ type: actions.NEW_STORAGE_CREATED, payload: storage });
           setNotifer(true);
        };
    }

当然，这两种方法都将被包裹在某种ajax方法中，并将放在success部分。

我只是不知道在方式2中是否可以从另一个方法调用另一个操作方法

在同一个调用中调度两个事件是完全可以的。您正在使用庞大的中间件，这似乎可以很容易地完成，但对于那些没有Redux-Multi的人来说。尽管如此，我还是希望它们分开发送，因为:

  1. 对于可能在你的代码上工作的其他人来说，更容易识别通知是从哪里出现的。
  2. 如果单独调用，您可以通过编程控制(延迟，偏移或与其他一些动作配对等)通知。你永远不知道你需要如何修改它。是的，你可以在某些地方做，而不是其他地方，但最好保持一致(第一点)。

你可以让你的createNewStorage 然后启用，并在它成功后调度另一个事件(假设你正在做一些数据库更新，它失败了，所以你不希望用户事先看到成功通知)。

在你的行动中:

  export function createNewStorage(success) {
    return function (dispatch) {
      return new Promise(function(resolve, reject) {
        if (somecondition === true) {
          dispatch({ type: actions.SET_NOTIFIER, payload: success });
          resolve('it works!');
        } else {
          reject(':(');
        }
      });
    };
  }

在你的组件中:

createNewStorage()
  .then(function() {
    ... launch the other action ...
  })
  .catch(function() {
    ... it failed :( ...
  });
相关文章：