首页
登录 | 注册

Flux架构学习

Flux是Facebook提出的一个系统架构,用于推进应用中的数据单向流动。其在Flux的官方博客上介绍如下:Flux is the application architecture that Facebook uses for building client-side web applications.同过这段话我们可以知道Flux主要还是一个web前端的系统架构,当前主要也是结合React生态系统中的React,GraphQL一起使用。

架构模式

Flux模式的结构图如下:
Flux架构学习

相对于MVC架构:Flux中的Store包含了应用的所有数据,Dispatcher替换了原来的Controller,当Action触发时,决定了Store如何更新。当Store变化后,View同时被更新,还可以生成一个由Dispatcher处理的Action。这确保了数据在系统组件间单向流动。当系统有多个Store和View时,仍可视为只有一个Store和一个View,因为数据只朝一个方向流动,并且不同的Store和View之间不会直接影响彼此。

不同组件的介绍

下图来自于Flux的官方博客:
Flux架构学习

Dispatcher

Dispatcher是Flux的中心枢纽,管理着Flux应用中的所有数据流。它本质上是Store的回调注册。每个Store注册它自己并提供一个回调函数。当Dispatcher响应Action时,通过已注册的回调函数,将Action提供的数据负载发送给应用中的所有Store。当前一个Action还未处理完时,Dispatcher能够拒绝到来的Action,这样有助于确保数据层完成视图的更新。随着应用程序的增长,Dispatcher变得更加关键,因为它将管理Store之间的依赖,以特定的顺序调用注册的回调函数。Store可以声明等待其它Store完成更新后,再相应地更新自己⋯⋯

Stores

Store包含应用程序的状态和逻辑。它们的角色某种程度上与传统MVC中的Model类似,但它们管理很多对象的状态,它们不是某个对象的实例,也不是Backbone集合。Store不只是简单地管理ORM风格的对象集合,它还为应用程序中的特定领域(Domain)管理应用状态。

Actions

一个Action是由Dispatcher暴露出来的方法,这个方法承载着所需要的全部数据,同时该方法能触发Sotre的变化。

参考链接:
https://facebook.github.io/flux/docs/overview.html



2020 jeepxie.net webmaster#jeepxie.net
10 q. 0.009 s.
京ICP备10005923号