redux入门指南(一)
作者:Jogis
原文链接:https://github.com/yesvods/Blog/issues/6
转载请注明原文链接以及作者信息
简介
redux是可预测的JS应用状态容器。
状态
现在有一个开关按钮组件ToggleButton
,而按钮的on/off
就是这个组件的状态。
一个应用里面会有大量的组件,而管理以及传递这些组件的状态,就成了非常繁琐的工作。redux使用一个非常简洁的思路,方便地提供不同层级组件的解耦式状态操作。
管理状态
reudx本身是一个非常简单的流程概念,它仅仅是一个状态容器。如图:
APP或者说是Web/SPA,在组件化的应用中,会有着大量的组件层级关系,深嵌套的组件与浅层父组件进行数据交互,变得十分繁琐困难。而redux,站在一个服务级别的角度,可以毫无阻碍地(这个得益于react的context机制,后面会讲解)将应用的状态传递到每一个层级的组件中。一整个应用,得一管家,足矣。
redux三大准则
使用redux过程中,只需要知晓这几个准则,就可以非常便捷地进行开发,少踩坑才是硬道理。
单一数据源
整个应用状态,都应该被存储在单一store的对象树中。
只读状态
唯一可以修改状态的方式,就是发送(dispatch)一个动作(Action),这个动作以最小的数据,去描述发生了什么。
比如,用户想要从状态中删除一条TODO信息:
//Action
{type: constant.REMOVE_TODO,id: 'TODO_ID'
}
非常简单,动作(Action)只需要一个type
来描述这个动作类型,以及一个简单的id
去表明要删那条信息。并不需要提供包含timestamp
、data
在内的一大堆信息。
使用纯函数去修改状态
纯函数(pure function)可被看成是一个状态机,在任何时候,只要有相同的输入,就会得到相同的输出:
//pure function
//add(1, 2) ===> 3
//add(1, 2) ===> 3
function add(a, b){return a + b;
}//impure function
//不纯函数,多次使用相同参数调用,可能会得出不同结果
//add(1) ===> 1
//add(1) ===> 2
var count = 0;
function add(n){return count + n;
}
这种修改状态的纯函数在redux里面被称作reducer,纯函数保障了状态的稳定性,不会因不同环境导致应用程序出现不同情况。而这也是redux内核的精髓(核心源码分析章节会讲解)。
redux几个概念
以上是redux的一些介绍,下面就开始入门redux。实际上,redux使用起来非常简单,就以上面提到的图片进行介绍。
Action
第一步,当然就是Action
这个动作了,它可是唯一可以改变状态的途径,包括服务器来的推送以及用户操作,最终都需要转化为一个个Action
。这种简单的方式解决了传统应用因为多种方式修改状态,而导致应用出现各种问题。
通过集中化对状态的修改,Action
会按着严格的顺序一个个执行,因此应用并不会出现竞态的情况;Action
仅仅是一个纯的JS对象,因此这个动作,可以被记录、序列化、存储以及以后通过一系列的“回放”来调试应用。
一个简单的添加TODO信息的动作:
{type: constant.ADD_TODO,msg: "下班回家收衣服"
}
Store
第二步,store
可以被看作redux的最核心部分,一个小小的store
,管理着整个应用的状态。其中包括:应用状态初始化、状态修改、注册状态变化监听器、替换应用状态。
当然,现在并不会涉及到这么多内容。store
提供了一个方法#dispatch
,这个就是用来发送一个动作,去修改store里面的状态,然后可以通过#getState
方法来重新获得最新的状态:
//dispath above action
store.getState() // ===> {todo: []}
store.dispatch({type: constant.ADD_TODO,msg: "下班回家收衣服"
});
store.getState() // ===> {todo: ['下班回家收衣服']}
然后返回的新状态,即将作为应用的状态通过props(在react应用里面)发送回APP。APP接收到新的props会对应用进行实时更新。这样就完成一个动作触发到应用更新的过程了。
Reducer
刚有耳闻,这个reducer
是用来修改状态的。再回顾上面的代码,在store.dispatch
后发现store.getState
调用返回的对象变了。
那应该是reducer
做了手脚,顺带一提,reducer
会接收两个参数:现在的状态state
,被发送的动作Action
function todo(state = [], action){if(action.type === constant.ADD_TODO){//如果是添加TODO的动作,那就赶紧把TODO存起来state.push(action.msg);return state;}else {//其他动作的话,就不改状态啦,原样返回return state;}
}
store
通过读取reducer
返回的内容,来作为新的状态,因此应用状态就更新了!
redux入门指南(一)相关推荐
- redux rxjs_可观察的RxJS和Redux入门指南
redux rxjs Redux-Observable is an RxJS-based middleware for Redux that allows developers to work wit ...
- redux入门_Redux入门
redux入门 典型的Web应用程序通常由几个共享数据的UI组件组成. 通常,多个组件的任务是显示同一对象的不同属性. 该对象表示可以随时更改的状态. 在多个组件之间保持状态一致可能是一场噩梦,尤其是 ...
- D3.js从入门指南
D3.js从入门指南 前言 近期略有点诸事不顺,趁略有闲余之时,玩起D3.js.之前实际项目中主要是用各种chart如hightchart.echarts等,这些图形库玩起来貌都是完美的,一切皆可配置 ...
- 入门指南目录页 -PaddlePaddle 飞桨 入门指南 FAQ合集-深度学习问题
入门指南目录页 -PaddlePaddle 飞桨 入门指南 FAQ合集 GT_Zhang关注 0.1012019.08.01 18:43:34字数 1,874阅读 795 Hi,欢迎各位来自Paddl ...
- Maven入门指南⑦:Maven的生命周期和插件
Maven入门指南⑦:Maven的生命周期和插件 一个完整的项目构建过程通常包括清理.编译.测试.打包.集成测试.验证.部署等步骤,Maven从中抽取了一套完善的.易扩展的生命周期.Maven的生命周 ...
- UE4风格化场景设计入门指南 Stylized Station – The Environment Artist’s Survival Kit
持续时间13h 1920X1080 .ts 包含项目文件 大小解压后:4.9G 语言:英语+中文字幕(人工校对) 标题:风格化的车站--环境艺术家的生存工具包 信息: 环境艺术很难. 尤其是作为初学者 ...
- 游戏风格化角色创建入门指南视频教程
游戏风格化角色创建入门指南视频教程 时间 33小时 包括项目文件 1920X1080 MP4 语言:英语+中文字幕(根据原英文字幕机译更准确)+原英文字幕 游戏中的风格化角色创建入门指南 百度一下 ...
- mongoDB 入门指南、示例
http://www.cnblogs.com/hoojo/archive/2011/06/01/2066426.html mongoDB 入门指南.示例 上一篇:简单介绍mongoDB 一.准备工作 ...
- 智能合约和区块链技术:入门指南
链客,专为开发者而生,有问必答! 此文章来自区块链技术社区,未经允许拒绝转载. 智能合约和区块链技术:入门指南 多年前,在没有数字合约和区块链技术存在的情况下,双方的合约往往以传统的方式进行.在加密货 ...
最新文章
- 被鹤岗买房鼓励,我带上6万来到另一小城
- yarn 切换 设置 镜像 源
- 必然之势:从结构、时间、媒介的角度看信息的发展趋势
- mysql校对规则设计编码命令
- CodeForces - 1354D Multiset(线段树/二分)
- 转:数字对讲机常识介绍
- 【Java】Java数据库访问体系重点总结
- (23)Vue.js组件介绍
- 心理测试:DISC性格测试(完整版)
- svga文件预览_Shu文件预览
- 开发者选项看html,手机怎么打开开发者选项?开发者模式开启方法
- 逆水寒2021最新服务器,逆水寒公布2021部分更新计划,写满了离经叛道
- 【研究报告】从单目深度估计到单目三维场景重建-沈春华老师-VALSE Webinar 22-13(总第279期)
- linux查看文件内容常用命令
- linux常用命令,自己总结
- 【C++碎碎念】函数
- 基于centos7.0+mono+jexus配置https(阿里云服务器最全配置jexus https教程)
- 分布式架构在云计算平台中的应用及优缺点分析
- python服务端开发调试日志系统_Python Django项目日志查询系统
- 齿轮建模 图片及链接
热门文章
- Java社区对Java发布周期声明的反应
- 使用VS2010编译64的Geos库
- UIWebView控件的简易浏览器小案例
- intval0.57100 php_关于PHP浮点数之 intval((0.1+0.7)*10) 为什么是7
- nginx post请求超时_Nginx 的超时 timeout 配置详解
- 菜鸟的学习之路(7) — 包(package)、Object类和String类
- SAP是如何与外界沟通的?
- 微信小程序swiper高度自适应,swiper的子元素高度不固定
- appium+python自动化98-非select弹出选择框定位解决
- 图说 WebAssembly(二):JIT 编译器