简单的Flux框架

使用React框架一段时间后,项目组提出使用Redux取代React。   

Redux的构建结构是按照Flux架构方案来的,所以了解了一下Flux。结果发现这种思想确实很适合交互性增强的业务。

感觉代码的架构就是高内聚低耦合。在一个复杂的业务中,考虑把整个复杂的流程分为一个个模块,然后便于管理和使用。

在前端交互中,整个流程。用户点击UI产生行为,行为改变UI的状态,UI及时响应重新渲染。 这就是一个简单的流程。

如上行为简化为下图   Flux当中用户通过UI点击产生Action,然后Action通过Dispatcher传递给状态的保持着Store,通过改变事件,与View进行交互让View进行重新的渲染简单的Flux框架_第1张图片



这是一个redux框架   其中符合Flux思想的几大模块。 

1.Action 里面都是不同的对象,包含actionType属性给它附上标签和其它的属性(用来传递属性)

2.Dispatcher

Dispatcher是将Action派发到Strore,负责在View和Store之间建立Action的正确传递路线。  Dispatcher只能有一个。 代码结构里面就是toute.js

3.Store

保存整个应用的状态的。这里面是存储在reducers文件夹底下的。

4.View

采用的是ControllerView模式进行的。components包含的是一些基本的纯框架模式。 在Containers是一些基本的View调用了。也设置了一些状态。提高了组件的可维护性,也方便复用基础组件

简单的Flux框架_第2张图片





你可能感兴趣的:(Web前端,Flux,Redux框架)