Question

假设我有一个“添加”项目的按钮。如果一切顺利，将会发出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请求时，这将无法正常工作，因为CreateNwStorage可能需要一段时间才能返回成功，而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方法所包围，并且会成功地部署。

我只是不知道是否可以在另外一个方法中调用另一个动作方法。

Answer 1

在同一个电话中调度两个事件是完全可以的。您正在使用thunk中间件，因此可以轻松完成，但对于那些不在那里的人Redux-Multi。也就是说，我仍然希望单独发送它们，因为：

对于可能处理您的代码的其他人来说，更容易识别通知的来源。
如果单独进行呼叫，您可以通过编程方式控制（延迟，偏移或与其他一些操作配对等）通知。你永远不知道你将如何修改它。是的，你可以在某个地方而不是其他地方做，但最好保持一致（第1点）。

然而，你可以让你的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 :( ...
  });

行动有多个调度或单独调用？ ReactJs + Redux

1 个答案: