结构分为四个

视图 view
动作 action
派发器 dispatcher
数据商店 store

流程:
用户操作视图 视图(view)发送动作(action)到派发器(dispatcher)
由派发器(dispatcher) 对动作类型(action.type)做判断
然后调用数据商店(store)的相应方法来操作数据模型(store.state)
最后由数据商店(store)通知视图(view)进行更新

在完整的案例中
action只是起到传递数据的作用 本质就是一个对象而已

action最好用专门的工厂函数来进行创建(actions)

在视图中 通过调用action工厂函数来生产aciton 再由工厂函数将action发送给派发器

同时 在开发时 应将视图部分进行拆分
拆分成 : 容器组件和UI组件
UI组件纯粹负责显示数据
容器组件负责处理业务逻辑

由容器组件提供更新视图的方法
然后在组件加载完成时 将更新视图方法提供给store

store应将其绑定到更新视图专用的事件上

例如:
let EventEmiiter = require("events").EventEmiiter

let store = {
...EventEmiiter.prototype,
subscribe(cb){
this.on("update",cb)
},
setUsername(name){
this.state.name = name

this.emit("update") //通知视图进行更新
},
unSubscribe(cb){ //注意: 在组件的卸载期 记得将更新视图函数进行解绑
this.removeListener("update",cb)
}
}

flux重构步骤:

1 将视图部分的页面组件拆分成容器组件和UI组件

UI组件所有数据(点击等各种事件所调用的函数)均来自于props

容器组件可继承 封装好的 Controller 以自动实现绑定更新视图方法及卸载组件时自动解绑

2 创建action工厂函数
定义一个初始化 的action工厂函数
请求需要的数据
将拿到的数据封装到 action中
将action发送到dispatcher (通过.dispatch()方法)

3 在派发器中 配置对应的case
并且从action中拿到数据后 设置到对应store中即可

4 在容器组件的加载完成的生命周期函数中 调用上述步骤封装好的action工厂函数

5 路由部分引入的组件 注意需要切换成 容器组件

flux架构的详细介绍和使用!的更多相关文章

  1. Spring Cloud的核心成员、以及架构实现详细介绍

    什么是微服务 微服务的概念源于Martin Fowler所写的一篇文章“Microservices”. 微服务架构是一种架构模式,它提倡将单一应用程序划分成一组小的服务,服务之间互相协调.互相配合,为 ...

  2. 微服务架构学习与思考(10):微服务网关和开源 API 网关01-以 Nginx 为基础的 API 网关详细介绍

    微服务架构学习与思考(10):微服务网关和开源 API 网关01-以 Nginx 为基础的 API 网关详细介绍 一.为什么会有 API Gateway 网关 随着微服务架构的流行,很多公司把原有的单 ...

  3. 微服务架构学习与思考(11):开源 API 网关02-以 Java 为基础的 API 网关详细介绍

    微服务架构学习与思考(11):开源 API 网关02-以 Java 为基础的 API 网关详细介绍 上一篇关于网关的文章: 微服务架构学习与思考(10):微服务网关和开源 API 网关01-以 Ngi ...

  4. 柯南君:看大数据时代下的IT架构(2)消息队列之RabbitMQ-基础概念详细介绍

    一.基础概念详细介绍 1.引言 你是否遇到过两个(多个)系统间需要通过定时任务来同步某些数据?你是否在为异构系统的不同进程间相互调用.通讯的问题而苦恼.挣扎?如果是,那么恭喜你,消息服务让你可以很轻松 ...

  5. 《基于Nginx的中间件架构》学习笔记---4.nginx编译参数详细介绍

    通过nginx -V查看编译时参数: 在nginx安装目录下,通过./configure --help,查看对应版本ngnix编译时支持的所有参数: Nginx编译参数详细介绍: --help 显示本 ...

  6. vue对比其他框架详细介绍

    vue对比其他框架详细介绍 对比其他框架 — Vue.jshttps://cn.vuejs.org/v2/guide/comparison.html React React 和 Vue 有许多相似之处 ...

  7. springboot 学习之路 18(webflux详细介绍(2))

    webflux的详细介绍 引言:上一节已经简单介绍webflux的一些基本概念,本章继续学习webflux的原理和实战方面的东西: Spring WebFlux架构: note:注意理解上面这张图.下 ...

  8. php CGI、Fastcgi、PHP-FPM的详细介绍与之间的关系

    以下PHP CGI.Fastcgi.PHP-FPM的一些信息归纳和汇总----->详细介绍与之间的关系 一:CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的 web ...

  9. RabbitMQ消息队列(一): Detailed Introduction 详细介绍

     http://blog.csdn.net/anzhsoft/article/details/19563091 RabbitMQ消息队列(一): Detailed Introduction 详细介绍 ...

随机推荐

  1. 开源项目Telegram源码 Telegram for Android Source

    背景介绍 Telegram 是一款跨平台的即时通信软件,它的客户端是自由及开放源代码软件.用户可以相互交换加密与自毁消息,发送照片.影片等所有类型文件.官方提供手机版.桌面版和网页版等多种平台客户端. ...

  2. July 13th, 2018. Friday, Week 28th.

    Don't let the mistakes and disappointments of the past control and direct your future. 不要让你的未来被过去的错误 ...

  3. 浅谈js的类数组对象arguments

    类数组对象:arguments总所周知,js是一门相当灵活的语言.当我们在js中在调用一个函数的时候,我们经常会给这个函数传递一些参数,js把传入到这个函数的全部参数存储在一个叫做arguments的 ...

  4. JS之for循环面试题

    今天同事问了道问题 ,b=; ,b<;++a,++b){ g=a+b } console.log(g) 问输出结果为多少??? 答案:12 这里要知道for循环的条件不管写多少个,必须都满足才可 ...

  5. win10安装配置mongodb

    1. 下载MongoDB并安装官网下载地址:https://blog.csdn.net/qq_41127332/article/details/80755595 ,选择合适的版本进行下载.我选择是3. ...

  6. Gym 101806T Touch The Sky

    http://codeforces.com/gym/101806/problem/T 题目 In the year 2117, Professor Jaemin Yu developed a line ...

  7. 题解:T103342 Problem A. 最近公共祖先

    题目链接 题目大意 求每个点对的lca深度的和 以每一层分析,得出通式 由于1e9的数据范围要化简表达式得到O(能过) 瞎搞后就是2^(2n+2)-(4n+2)*2^n-2 code: #includ ...

  8. CentOs篇

    Advanced-高级配置.Security-安全.Boot-启动引导: 1.Removable Devices-移动设备 2.Hard Drive-本地硬盘 3.CD-ROM- Drive-光盘 4 ...

  9. ionic4 组件调用的坑

    我们再开发过程中很多模块做成组件,那么调用的时候则需把module.ts中的引入去掉,如下红色框框:

  10. [LOJ 2083][UOJ 219][BZOJ 4650][NOI 2016]优秀的拆分

    [LOJ 2083][UOJ 219][BZOJ 4650][NOI 2016]优秀的拆分 题意 给定一个字符串 \(S\), 求有多少种将 \(S\) 的子串拆分为形如 AABB 的拆分方案 \(| ...