React+Redux+中间件
MVVM是Model-View-ViewModel的缩写。mvvm是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。
在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。
一:React生命周期
二:Redux工作流程
三:中间件
异步操作怎么办?Action 发出以后,Reducer 立即算出 State,这叫做同步;Action 发出以后,过一段时间再执行 Reducer,这就是异步。怎么才能 Reducer 在异步操作结束后自动执行呢?这就要用到新的工具:中间件(middleware)。
(1)Reducer:纯函数,只承担计算 State 的功能,不合适承担其他功能,也承担不了,因为理论上,纯函数不能进行读写操作。
(2)View:与 State 一一对应,可以看作 State 的视觉层,也不合适承担其他功能。
(3)Action:存放数据的对象,即消息的载体,只能被别人操作,自己不能进行任何操作。
只有发送 Action 的这个步骤,即store.dispatch()
方法,可以添加功能。举例来说,要添加日志功能,把 Action 和 State 打印出来,可以对store.dispatch
进行如下改造。
中间件就是一个函数,对store.dispatch
方法进行了改造,在发出 Action 和执行 Reducer 这两步之间,添加了其他功能。
同步操作只要发出一种 Action 即可,异步操作的差别是它要发出三种 Action:
- 操作发起时的action
- 操作成功的action
- 操作失败时的action
四:其他
redux-thunk 中间件
redux-promise 中间件
转载于:https://juejin.im/post/5b14ec52f265da6e281c0278
React+Redux+中间件相关推荐
- redux中间件+react高阶组件
1.redux中间件 中间件提供第三方插件的模式,自定义拦截 action -> reducer 的过程.变为 action -> middlewares -> reducer.这种 ...
- React+Redux开发实录(一)搭建工程脚手架
React+Redux开发实录(一)搭建工程脚手架 React+Redux开发实录(二)React技术栈一览 搭建工程脚手架 准备工作 安装node 安装git 安装一款前端IDE 推荐VSCode, ...
- react实战项目_React实战之React+Redux实现一个天气预报小项目
引言 经过一段时间的React学习,React和Vue的开发确实有很大的不同,但是都是MVVM框架,因此上手没有很大的难度,这次用React+Redux开发一个天气预报小项目.源码地址:https:/ ...
- React+Redux仿Web追书神器
引言 由于 10 月份做的 React Native 项目没有使用到 Redux 等库,写了一段时间想深入学习 React,有个想法想做个 demo 练手下,那时候其实还没想好要做哪一个类型的,也看了 ...
- redux中间件原理-讲义
1.redux中间件简介 1.1.什么是redux中间件 redux 提供了类似后端 Express 的中间件概念,本质的目的是提供第三方插件的模式,自定义拦截 action -> reduce ...
- 一个 react+redux 工程实例
在前几天的一篇文章中总结部分提到了学习过程中基础的重要性.当然,并不是不支持大家学习新的框架,这篇文章就分享一下react+redux工程实例. 一直在学习研究react.js,前前后后做了几次分享. ...
- redux引用多个中间件_如何轻松创建您的第一个Redux中间件
redux引用多个中间件 by Gabriele Cimato 加布里埃莱·西马托(Gabriele Cimato) 如何轻松创建您的第一个Redux中间件 (How to create your f ...
- react redux 简化_Redux 源码解析
前言 近日,出于对 Redux 的好奇和想对自己用过的东西知根知底之目的,做了一个 Redux 的自我检测,以便彻底了解其精髓之处.下面我会对使用 Redux 之后产生的疑问做一个清单,用问题导向往下 ...
- React+Redux系列教程
2019独角兽企业重金招聘Python工程师标准>>> 参考项目:https://github.com/lewis617/react-redux-tutorial 参考项目下载地址: ...
最新文章
- LeetCod中等题之复数乘法
- Python面试之 is 和 == 的区别
- websvn mysql_Centos 5.3 Nginx+php+mysql配置 独立的 Subversion (SVN)服务器
- JavaScript教程之DOM和BOM
- mysql root 不能登录_mysql root 用户不能登录的问题
- LeetCode 1679. K 和数对的最大数目(哈希)
- Spring Boot 属性配置你所不知道的细节
- 《TensorFlow 2.0深度学习算法实战教材》学习笔记(七、Kears高层接口)
- nrf52840芯片入门
- 频谱图 与傅立叶变换
- 【kubernetes】k8s的job和cronjob详细说明【job、cronjob(cj)、descheduler(pod均衡)】
- html autocomplete 多个参数切换
- 动物视觉感知进化的一些看法
- 浅析溯源(2):如何实现区块链溯源
- Scala学习笔记(黑马视频)
- ubuntu重启ssh服务
- 李笑来 css,CSS
- 雷达有源干扰——噪声卷积干扰
- 大牧絮叨设计模式:工厂方法模式
- C语言strtok函数
热门文章
- Docker容器中数据两种持久化存储方式:卷和挂载宿主目录
- 【Qt】Qt再学习(十五):关于paintEvent、QPainter学习这一个demo就够了
- mysql 临时列_如何在MySQL中列出临时表列?
- 中计算散度的函数_理解 Kullback–Leibler 散度的近似
- python并发编程方法_Python Futures并发编程详解
- php数据库html文本,关于php,mysql,html的数字分页和文本_php
- php复选框关联数据库字段,通过php将复选框中的多个值插入数据库
- 模糊匹配 读音_onenote搜索机制详解②:两种搜索模式,模糊与精确匹配
- Android架构篇-1 项目组织架构
- matlab中的expotest,提高Fortran矩阵指数性能(Expokit比Matlab、Python慢)