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

女爷i 2022-06-17 09:22 139阅读 0赞

创建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函数去分离两个事件的控制域。

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

发表评论取消回复

表情：

评论列表（有 0 条评论，139人围观）

还没有评论，来说两句吧...

相关阅读

相关 React篇(014)-简述 flux 思想

参考答案：Flux 的最大特点，就是数据的"单向流动"。 1. 用户访问 View 2. View 发出用户的 Action 3. Dispatcher 收到 Acti

淡淡的烟草味﹌/ 2022年09月13日 14:27/ 0 赞/ 195 阅读

相关说说React,Flux,Reray和GraghQL

前几天看到同事转发的《ReactEurope Conf 参会感想》，这篇文章讲的react的一些理念感觉有些道理，但我对react最终能很好的实现learn once, wri

缺乏、安全感/ 2022年08月02日 07:23/ 0 赞/ 217 阅读

相关 React实战-如何构建React+Flux+Superagent的完整框架

React实战\-如何构建React+Flux+Superagent的完整框架 ReactJS并不像angular一样是一个完整的前端框架，严格的说它只是一个UI框架，负责U

深藏阁楼爱情的钟/ 2022年07月17日 03:55/ 0 赞/ 242 阅读

相关 React_Flux入门实例

Flux 架构入门实例过去一年中，前端技术大发展，最耀眼的明星就是React。本文参考的是阮大神的实例。加上自己的一些理解。React 本身只涉及UI层，如果搭建大型应

小咪咪/ 2022年07月12日 04:56/ 0 赞/ 236 阅读

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

创建React公众号(React实战)的初衷主要由以下几个原因：一：目前处于一个较为休闲的状态。二：工作多年后，对软件开发过程算的上一些体会，在学习和使用React中，

女爷i/ 2022年06月17日 09:22/ 0 赞/ 140 阅读

相关自己对react中flux框架部分底层原理的理解

这是我在学习react框架时的个人理解，包含个人总结和案例中代码的分析，对于react中部分与内存分配相关的原理还是不是很懂: 1.个人总结： > flux架构的理解：

短命女/ 2022年06月03日 08:57/ 0 赞/ 193 阅读

相关 React-flux杂记

简介 Flux是一种搭建WEB客户端的应用架构，更像是一种模式而不是一个框架。特点单向数据流与MVC的比较 1.传统的MVC如下所示（是一个双向数据流模型）

た入场券/ 2022年03月16日 13:52/ 0 赞/ 232 阅读

相关 React+React-router4.x+Ant Design+Flux视频教程

链接: https://pan.baidu.com/s/1vWWOFaKCcn6RnGQ5ZuhQpw 提取码: 39n6 需要其他学习资料或者探讨Java相关开发技术可以

快来打我*/ 2021年11月15日 12:54/ 0 赞/ 279 阅读

相关 Flux、Redux到react-redux发展衍变之Flux解读

react开发中，组件直接传递参数需要props一层层代理，对于复杂组件，它可能嵌套的子组件非常多，层级也比较深，那么，如果还采用props链条来维护组件通信或者数据共享，将非

布满荆棘的人生/ 2021年09月17日 02:30/ 0 赞/ 401 阅读

相关 Struts的Action的动态方法调用实战

一 Action package org.crazyit.app.action; import com.opensymphony.xwork2.Ac

小咪咪/ 2021年07月25日 02:12/ 0 赞/ 461 阅读