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写的左右轮播图特效
Feb 12 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
iView-admin 动态路由问题的解决方法
Oct 03 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 Javascript
如何实现iframe父子传参通信
Feb 05 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
几个学习PHP的网址
2006/11/25 PHP
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
详解vue2路由vue-router配置(懒加载)
2017/04/08 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
简单的三步vuex入门
2018/05/20 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
python爬取网站数据保存使用的方法
2013/11/20 Python
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
python 读取.nii格式图像实例
2020/07/01 Python
幼儿园中班教学反思
2014/02/10 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
Python打包为exe详细教程
2021/05/18 Python