Flux
简介
上一节最后提到了React使用props和state来管理其数据在实际应用中仍有其局限性。接下来，在学习针对React此类问题的解决方案前，先认识一下同样身为单向数据流框架的Flux。
MVC框架的缺陷
书中提到，Flux的出现是源自facebook团队对于MVC框架的不满意。
MVC框架讲应用分为模型（model）、视图（view）、控制器（controller）三部分。MVC框架理想的运作方式是controller接受用户的输入之后，根据输入调用model中的对应业务逻辑，最后将产生的数据结果提交给view，由view去进行渲染。
按照上面的思路，view和model直接并不会有通信，然而在实际框架实现中，总是允许view和model可以直接通信。而且在开发中，往往有大量的简单数据处理，于是原本理想的controller-model-view的树状结构，变成了复杂的网状结构，这无疑是不利于代码的开发和维护的。
Flux
基于上述的问题，Flux出现了，而Flux的一个显著特点就是——严格的数据流控制。
一个Flux框架应用分为四个部分：动作（Action）、分发器（Dispatcher）、存储（Store）、视图（View）。
在MVC框架中，如果要增加一个功能，Controller就需要增加一个函数。而在Flux框架中，dispatcher会只暴露出来一个dispatch函数，要增加一个功能，只需新增一个action类型，然后dispatch就能根据接受的action类型去调用功能的实现，类似于switch-case语法那样。
在视图（View）部分，存在于Flux框架下的React组件需要实现以下几个功能:
- 创建时要读取Store中的状态来初始化组件内部状态；
- 当Store中状态发生变化时，组件要立刻同步更新内部状态保持一致；
- View 如果要改变Store状态，必须而且只能派发action。
Flux的缺陷
Flux通过Action-Dispatcher的实现了对数据进行限制的单向数据流机制，View只能从Store中读取数据，要想改变状态，只能通过向Dispatcher派发Action触发。这一限制机制避免了MVC框架下由于View和Model之间的通信导致的高耦合问题。但是Flux本身也存在着局限性，因而出现了对Flux进行改动的Redux。
Store之间存在依赖关系
Javascript的代码执行是异步的，因此并不能确定代码执行的顺序，而Flux的这个缺陷实际也是由此引出。
举一个例子，当一个状态B依赖于状态A时，也即B的状态是根据A的状态去计算的。在这种情况下，由于Javascript的异步执行机制，并不能保证Dispatcher中状态B部分在状态A部分之后执行。对于此问题，Flux提供了waitFor函数。1
2
3
4B.dispatchToken = AppDispathcer.register((action)=>{
AppDispathcer.waitFor([A.dispatchToken]);//等待Dispatcher中状态A部分先执行
//执行剩余逻辑
})
在状态B的Dipsatcher注册函数中，通过使用waitFor函数，以状态A注册函数的Token为标记，实现了等待状态A的Action先执行。
Flux如此解决状态依赖的问题所须的代价也很明显：
- 被依赖的状态A部分的注册函数产生的Token需要被暴露出来；
- 状态B的action处理中需要添加waitFor函数；
- 还有一个我自己认为的问题，就是状态间的依赖增加了状态间的耦合度，当状态的数量以及状态间依赖的复杂度提升之后，无论是捋清状态间action的执行顺序还是后续改动状态间的依赖关系，都会变得较为困难。
难以进行服务端渲染
服务端渲染是指在服务端就将HTML文件组装好然后发送给客户端。
和一个浏览器网页只服务于一个客户不同，在服务端是要同时接受很多用户的请求，而Flux结构的Dispatcher和每个Store都是全局的，面对大量的请求，不同请求的状态处理会很复杂，因而不适合使用Flux结构。
Store混杂了逻辑和状态
Store中封装了数据和处理数据的逻辑部分，也就是将状态和逻辑耦合在一块。虽然很符合面向对象的思维，但也意味着对Store的改动也是一个整体的改动，无法实现例如在保存Store状态的同时对逻辑部分进行修改的情况。虽然这种情况略显少见，书中举出来两个应用场景：
- 在开发模式下检错，如果能在保证不清除Store状态下改动逻辑，就能省去复现Store状态的步骤。
- 在生产环境下根据用户属性来动态加载不同的模块，而且动态加载模块还希望网页不要重新加载，这时候也希望能过在不修改应用状态的前提下重新加载应用逻辑，这也即是热加载（Hot Load）。
- 本文作者： Kylin
- 本文链接： https://kylinnnnn.github.io/2025/07/30/读书速记-《深入浅出React和Redux》-三）上/
- 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！