动作是否应该分开进行多个调度或调用？ ReactJs + Redux

Question

说我有一个“添加”项目的按钮。如果一切顺利，则会发出ajax请求，该项目将被添加到页面并显示成功消息。

会有2个调度事件发生

Create 
Notification 

但应该是这个事件的fireing什么？

说我在我的组件这种方法得到的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请求呼叫g他们这样做将无法正常工作，因为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方法的缠绕并且将被放于成功部分。

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

Answer 1

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

1. 它更容易确定通知是从其他可能在您的代码上工作的其他人身上出现的。
2. 如果通话是分开进行的，您可以以编程方式控制（延迟，偏移或与其他一些动作配对）通知。你永远不知道你将如何修改它。是的，你可能会在某个地方而不是其他地方，但最好保持一致（第1点）。

但是你可以让你createNewStoragethenable和派遣它的成功后，其他事件（假设你正在做一些DB更新和失败，所以你不想让用户看到一个成功的通知事前） 。

在你的行动：

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 :(... 
    });