谈谈对redux的认识
redux是从flux演变而来,但又独立于react。简言之就是,redux是一种单纯的状态管理器。可以和react搭配,也可以和其它框架搭配。
redux有三个重要的部分组成: store, action, reducer
其中store是一个对象,action是一个对象,reducer是一个纯函数。
store对象,用于包裹action和reducer两个部分。简言之store就是一个中间桥梁,用于连接action和reducer。
action对象可以看做是一组指令的集合。比如添加一条用户信息。action必须要用一个type属性,也就是该条指令的名字。其余属性可以按需添加。
reducer是一个纯函数(纯函数概念大家可以去google,这里就不讲了),有两个参数,一个是state(当前的状态值),一个是action(操作指令)。
通过这两个参数,按照指定规则计算出一个新状态值,并返回新状态值。由于一般我们会把state定义为对象形式,所以这里最好返回也是一个对象。
在使用store之前,需要先创建一个store.
redux提供一个createStore组件用于创建store。
在创建store时需要传入reducer函数。
let action = { //定义一个指令
type: 'ADD_TODO', //指令名字,由于指令名是一个常量,所以全部大写
userId: 1 //其它数据
}; let reducer = function(state = {userId: 10}, action){ //两个参数分别是当前的state值和action对象
switch(action.type){
case 'ADD_TODO':
return {...userId, userId: action.userId} //返回计算后的新状态
default:
return state;
}
} let store = createStore(reducer)
这样一个store就创建好了。
但是这样,没有任何用。我们说指令需要用户去发送的,不然reducer不会返回新状态。所以,我们就要手动去发送指令。
比如我们通过点击去发送:
function sendUserId(action){
store.dispatch(action); //store通过dispatch方法去派送指令
}
<div onClick={sendUserId}>发送</div>
store通过dispatch方法去派送指令,一旦dispatch执行,reducer函数会自动执行。
到此为止,一个完整的store过程就算完成了。
但是,如果我们这个时候要用新状态怎么办?我们知道react是通过改变state方式来重新渲染ui的。
这个时候我们已经有了新的state了,现在就是要把新state取到,然后调用setState,就可以更新ui了。
好,知道这个逻辑后,就好办了。
store提供一个getState方法来获取新的state。不过getState不能直接去获取,需要用监听的方式来获取。store也提供了相应的监听方法。
store.subscribe(function(){
var newState = store.getState();
this.setState(newState);
})
到此为止,一整套状态转换就全部完成了。这时有人可能就说,redux看起来很蹩脚啊,还不如用this.props来的快。
对,你说的没错,目前为止只是单讲redux,并没有和react结合。
下一节我们再一起学习react-redux这个插件。这个是完全为react量身定制的。
谈谈对redux的认识的更多相关文章
- 深入理解React、Redux
深入理解React.ReduReact+Redux非常精炼,良好运用将发挥出极强劲的生产力.但最大的挑战来自于函数式编程(FP)范式.在工程化过程中,架构(顶层)设计将是一个巨大的挑战.要不然做出来的 ...
- 前端 JSer 装逼手册
阅读 8143收藏 2352016-7-18 SegmentFault 分享:吉祥物 @ SegmentFault 在装逼成本越来越高的 JS 圈,是时候充值一下了 -- 题记. 作者:kenberk ...
- 谈谈 Redux 与 Mobx 思想的适用场景
谈谈 Redux 与 Mobx 思想的适用场景 Redux 和 Mobx 都是当下比较火热的数据流模型,一个背靠函数式,似乎成为了开源界标配,一个基于面向对象,低调的前行. 函数式 vs 面向对象 首 ...
- 从 源码 谈谈 redux compose
compose,英文意思 组成,构成. 它的作用也是通过一系列的骚操作,实现任意的.多种的.不同的功能模块的组合,用来加强组件. 看看源码 https://github.com/reactjs/red ...
- Redux初见
说到redux可能我们都先知道了react,但我发现,关于react相关的学习资料很多,也有各种各样的种类,但是关于redux简单易懂的资料却比较少. 这里记录一下自己的学习理解,希望可以简洁易懂,入 ...
- 谈谈React那些小事
前言 说起React,那也是近一年多时间火起来的前端框架,其在Facebook的影响力和大力推广下,已然成为目前前端界的中流砥柱.在如今的前端框架界,React.Vue.Angular三分天下的时代已 ...
- 【前端】react学习阶段总结,学习react、react-router与redux的这些事儿
前言 借用阮一峰的一句话:真正学会 React 是一个漫长的过程. 这句话在我接触react深入以后,更有感触了.整个react体系都是全新的,最初做简单的应用,仅仅使用react-tools打包js ...
- 谈谈CommonsChunkPlugin抽取公共模块
引言 webpack插件CommonsChunkPlugin的主要作用是抽取webpack项目入口chunk的公共部分,具体的用法就不做过多介绍,不太了解可以参考webpack官网介绍: 该插件是we ...
- redux和mobx比较(一)
Redux vs Mobx 那么具体到这两种模型,又有一些特定的优缺点呈现出来,先谈谈 Redux 的优势: 数据流流动很自然,因为任何 dispatch 都会导致广播,需要依据对象引用是否变化来控制 ...
随机推荐
- 算法导论 第六章 2 优先队列(python)
优先队列: 物理结构: 顺序表(典型的是数组){python用到list} 逻辑结构:似完全二叉树 使用的特点是:动态的排序..排序的元素会增加,减少#和快速排序对比 快速一次排完 增 ...
- 安装MySQL for Windows 数据库
在官网下载MySql数据库windows版本:http://dev.mysql.com/downloads/file/?id=459075 下载到本地解压出来,如下图: 复制上面目录下的my-defa ...
- SQL Server 上关于同一张表里的三级联动
或许这并不能叫做三级联动,三级联动是很容易实现的东西,有明确的层级关系,一般分开三张表存储.我在公司的项目里遇到这样一个问题,同一张表里面,有分公司,客户,项目3种关系,他们的层级关系是这样:分公司- ...
- Python+selenium(多表单、多窗口切换)
多表单切换 案例:在Frame.html文件种定位搜狗搜索页面,进行搜索操作 Frame.html <html> <head> <title>Frame_test& ...
- windows 环境下.Net使用Redis缓存
Redis简介 Redis是一个开源的,使用C语言编写,面向“键/值”对类型数据的分布式NoSQL数据库系统,特点是高性能,持久存储,适应高并发的应用场景.Redis纯粹为应用而产生,它是一个高性能的 ...
- HDU 6076 (动态规划)
HDU 6076 Security Check Problem : 有两个长度为n的队列过安检,每个人有一个特征值.如果两个队列中的第一个人的特征值之差小于等于k,那么一次只能检查其中一个人,否则一次 ...
- linux shell if语句使用方法 [转载]
最精简的 if 命令的语法是: if TEST-COMMANDS; then CONSEQUENT-COMMANDS; fi TEST-COMMAND 执行后且它的返回状态是0,那么 CONSEQUE ...
- linux date 格式化时间和日期
[root@108test ~]# date -d today +"%Y-%m-%d" 2008-05-07 [root@108test ~]# date -d today + ...
- P1396 营救 洛谷
https://www.luogu.org/problem/show?pid=1396 题目描述 “咚咚咚……”“查水表!”原来是查水表来了,现在哪里找这么热心上门的查表员啊!小明感动的热泪盈眶,开起 ...
- powerDigner使用
PowerDesigner是一款功能非常强大的建模工具软件,足以与Rose比肩,同样是当今最著名的建模软件之一.Rose是专攻UML对象模型的建模工具,之后才向数据库建模发展,而PowerDesign ...