React实战-Flux中嵌套action的解决方法

创建React公众号(React实战)的初衷主要由以下几个原因：

一：目前处于一个较为休闲的状态。

二：工作多年后，对软件开发过程算的上一些体会，在学习和使用React中，总会不自觉的将React的实现方式与曾经的相比较，希望这也能给学习者一些启发。

三：忽然间，觉得文字表达的方式让我感到一些欣慰，虽然创建时间不长，关注不多，但只要有只言片语能给你一些帮助，就有意义了。欢迎转发：），不知道自己会写多久，也许是最后一篇，也许只是个开始。之前我订阅过一个大头妈妈讲故事的个人号，她每晚在卫生间录音，坚持了100多天，每晚给宝宝讲故事，但3个月前停止更新了，很是可惜，但我能感受到那份真心。

四：我本不太在意太多，每篇都是有话要说，每篇均是自身实战感悟，本不想关注细节，因为之前觉得框架有个清晰的了解，小的问题自然由google来解决，但发现浏览最多的居然是react中如何调用google、baidu地图，既然如此，我也会将开发过程中一些有趣的小问题分享。

进入正题吧，Flux是React官方的配套的数据控制方式，但是Redux势头更猛，个人使用的感觉，Flux更加随意，简单。但是充斥着大量的action，需要自己定义事件名，触发事件等，一个store中有很多个event.

事件多了，自然存在事件嵌套的情况，嵌套的方式也有两种：

一种：与后台数据调用的异步事件中嵌套。

 deleteDataByID: function (id) {

    DataResource.deleteDataByID(id).then(() => {

      StatusDialogStore.pushMessage({title: '删除数据', body: '删除成功！', isFail: false});

      this.searchData();

    }, (e)=> {

      StatusDialogStore.pushMessage({title: '删除数据', body: e.message, isFail: true});

    });

  },

注：deleteDataByID，searchData都关联一个flux事件

另一种：在前段代码段内部事件嵌套。

setSelectedDataByID(id){

    _selectDataCenterID = id;

    window.setTimeout(()=> {

      this.emit(DATACHANGE_EVENT);

    });

  },

注：setSelectedDataByID,DATACHANGE_EVENT也都关联着一个事件。

其实从上述代码已经可以看出区别，在异步调用时，不需要做额外的处理，可以直接在回调函数中执行下一个事件调用。在同步代码段中去不允许，同一控制域中是不允许出现事件嵌套的，那么我们可以采用setTimeout函数去分离两个事件的控制域。

这也只是我采用的方式，也许会有更好的方式。