React with TypeScript 系列(五) --Flux

编者语：年末工作比较多，所以这么迟才带来Flux。话说广州下雪也是奇景了，这个地球怎么了。当伦敦是10度，广州是4度也是醉了，还是那句大家要保护地球。
       对于React，更多是解决了UI层，也就是对于传统MVC中的View.至于Model-Controller 如果要整合React的代码又是如何实现呢？Facebook提出了一个叫做Flux([flʌks])的概念。
       在传统MVC中，我们会遇到这样一个问题，随着项目功能和模块的增长，所产生的Model和对应的View就会多起来，而系统的复杂性也随之增加。如下图：
       
       当然上图的情况比较极端，但也是一个不能不面对的问题，特别是有双向数据流产生的时候，就更难去解耦了。而Facebook所提供的Flux 是单向数据流的方式呈现，把MVC重新划分成Action ,Dispatcher,Store,View 四个重要的组件。如图：
       

       当Action触发时，flux通过Dispatcher进行响应。换句话说，Dispatcher是一个中转站，它管理整个Flux架构的数据枢纽, 这看上去很像我们所说的Controller.而Store更接近我们的Model,负责数据的操作。但它也负责一些状态变化。Dispatcher其实是一个Store的回调注册。当Dispatcher响应Action时，通过已经注册的回调函数，将Action所提供的数据传送给对应的Store，而Store变化时，界面也会同步更新。

       听上去有点复杂，我来说一个实例大家就会明白了，还是用回我们的主界面。我们把Facebook一个标准的Flux流图作为参考来说。
          
       当要加载页面时，我们需要把Action Creators放在ComponentDidMount方法中，这样才能把最后的数据给页面。

         
         Dispatcher要做什么，当然是把对应的Store回调处理好，如所对应的Action和返回的值。这里要说我们需要做一个ActionType为每个不同的Action事件做绑定（如增删改查）。所以在定义Dispatcher时需要定义一个APIActionID的枚举类型。如图：
       

      注意：这个枚举类型，分别会为Store和Action作出对应ID。所以大家必须要注意。别以为没用了

      还有一个基本的对应类型APIAction

       
       Dispatcher的最后绑定是和APIAction做绑定
       
       当我们在componentDidMount中使用Action时，它是通过Dispatcher去寻找Store的回调把数据传给Store保存，从而影响页面的变化的。
       
      这里就是Action中的加载，最后是要把返回的结果给Store的，所以会通过Dispatcher绑定actionType,和返回的结果。而在Store中,就只需要对应好actionType即可。下面的的方法就是我们针对不同的actionType，Store所要做的事情。
      
      Store涉及侦听回调事件，所以通过EventEmitter去完成.这里我们用到EventEmitter2
      
      这个时候，只要能匹配好actionType，数据就可以顺利匹配上界面上了。
      Flux不是一个新的技术，而是一个设计模式。对于Flux更多的是优化项目架构。或者你更习惯MVC/MVVM,但当模块增多的时候你会觉得它是更好的实现。