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 相关文章推荐
javascript while语句和do while语句的区别分析
Dec 08 Javascript
JavaScript的parseInt 进制问题
May 07 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 Javascript
JavaScript闭包原理与用法学习笔记
May 29 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
vue实现几秒后跳转新页面代码
Sep 09 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字符串 ==比较运算符的副作用
2009/10/21 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
毕业生在校学习的自我评价分享
2013/10/08 职场文书
仓库管理专业个人自我评价范文
2013/11/11 职场文书
平安建设实施方案
2014/03/19 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
户外宣传策划方案
2014/05/25 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
退税申请报告怎么写
2015/05/18 职场文书
采购部年度工作总结
2015/08/13 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书