redux.js详解及基本使用


Posted in Javascript onMay 24, 2019

什么是Redux

​      Redux我们可以把它理解成一个状态管理器,可以把状态(数据)存在Redux中,以便增、删、改。例如:

从服务器上取一个收藏列表,就可以把取回来的列表数据用Redux管理,多个页面共享使用,不用把数据传来传去。

A页面改变了一个状态,B页面要收到通知,做相应的操作。

​       Redux是一个给JS应用使用的可预测的状态容器,也就是说结果是可预测的,每一次改动会有确定的结果,正如函数式编程思想里的相同的参数会返回相同的结果。

​       Redux的状态会存储在单一的数据源中(存储在对象树中),这样,读取和共享就非常方便,不必去考虑会取错。状态是只能直接读取的,不能直接修改,修改只能通过发送事件(action)统一处理,这样便于分析事件,也可以避免随处修改状态造成竞态条件。统一处理状态时用纯函数(reducers中的函数)来修改状态,这些函数只是一个勾子,当需要修改状态树时Redux会来调用,你可以编写不同的函数来处理不同action对应的状态,或者复用一个函数来处理多种action。

为什么要用

​        简单来说就是使不易维护的数据变得维护简单,以小程序举例:多个页面要共享一套数据,而且这些数据是随时可能从网络上获取更新或增减的(如页面跳转时要带数据过去(非基本类型的数据),这时如果用app中的全局变量来暂存,存的变量多了,以后维护是个大麻烦,别人接手代码也会很烦恼。),还有一个地方的数据有改变,其他地方要收到通知等这些场景就可以使用Redux来做,如果你没有遇到这些问题,说明你的项目还没有到这些复杂的阶段,可以暂不考虑用Redux。

Redux的四个部件

redux.js详解及基本使用

Action:action是一个事件,用来描述发生了什么事,例如用户点击了一个刷新按钮,就会产生一个获取最新数据的事件,Action就是用来标识这个事件的,Action是一个JS对象,拥有2个属性,一个type,一个data,type用来表示该action的类型,data为新的状态数据,既然是对象当然还可以带上一些其他的属性,在处理状态的时候使用。
Reducer:reducer是一个处理状态的函数,真正的状态数据处理就是在这个函数里,reducer接受两个参数,一个是修改前的状态(state)对象,一个是action。可以在reducer中判断action的type属性来确定是一个什么事件然后对state做相应的处理,并返回新的state。

Store:store是Redux的CPU,状态处理器,它提供了一些api给我们使用,如:

getState方法,可以获取到最新的状态对象树。
subscribe方法用来订阅状态的更新,该方法接受一个函数做为监听器,并会返回一个注销订阅的函数,以便我们在不需要订阅时注销改监听器。

dispatch方法用来分发事件,它接受一个action作参数,把事件发出去。

State:state是存储的数据,数据会以对象树的结构来管理,这里要注意,Store每次传给reducer的state是整个state对象树中对应该reducer名字(key)的子对象。

​        事件发出后store会派reducer去处理事件,得到新的state,然后通知给各个监听器有新的变化(观察者模式)。
总体来说Redux就像是一个快递仓库(store),里面的货物(state)按地域分别存储,每当有一个新的货物进来(dispatch),处理程序或人员(reducer)就会去按地名(type)添加到仓库对应的位置,然后仓库通知(subscribe)快递员来取货物。

1、先是安装reduxJx, cnpm i --save rudux
2、创建一个store的js文件 
3、使用import来引用 redux   import { createStore } from 'redux'
4、然后在store 创建一个全局管理数据对象


const preloadState = {
  cartList: []
}
5、处理全局数据的方法
const reducer = function(state, action){
// 参数state:上一次的state状态
// 参数action:事件描述对象
console.log(action.type);
处理数据方法
if (item.a === 0 ){
  ...代码
}
//返回下一次全局使用的state状态
return state;
}
//创建仓库
const store = createStore(reducer, preloadState);
export default store
6、dispatch的使用 
    在store以外 store.dispatch()调用 参数1:设置store里面的action相对的type值,参数2:传递的数据 
  如下:
      store.dispatch({
          type: 'add',
          value: {
            id: 2
          }
      })
然后在store里面的action里面可以获取到 type和传入的value值,也可以在全局管理数据中的state改变全局的数据
7、在组件(页面)中也可以通过store. getState()来获取你存储的相对应的值,
8、store.subscribe()的操作是基本用来监听 store里面的一些数据变化进行操作的,需要主要的是dispatch的操作顺序,

总结

以上所述是小编给大家介绍的redux.js详解及基本使用,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
javascript获取元素的计算样式
May 24 #Javascript
运用js实现图层拖拽的功能
May 24 #Javascript
了解javascript中let和var及const关键字的区别
May 24 #Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 #Javascript
小程序登录/注册页面设计的实现代码
May 24 #Javascript
微信小程序+云开发实现欢迎登录注册
May 24 #Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 #Javascript
You might like
xml+php动态载入与分页
2006/10/09 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
js href的用法
2010/05/13 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
AngularJS日程表案例详解
2017/08/15 Javascript
js实现指定时间倒计时效果
2019/08/26 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
原生js+canvas实现下雪效果
2020/08/02 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
简单理解Python中基于生成器的状态机
2015/04/13 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
Pandas的数据过滤实现
2021/01/15 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
岗位职责定义及内容
2013/11/08 职场文书
自我鉴定怎么写
2013/12/05 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
南京导游词
2015/02/03 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python