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下通过$.browser来判断浏览器.
Apr 05 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
JavaScript Date对象详解
Mar 01 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
javascript的BOM
May 03 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
详解js的作用域、预解析机制
Feb 05 Javascript
使用ECharts实现状态区间图
Oct 25 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 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
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
javascript类型转换示例
2014/04/29 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
angular实现input输入监听的示例
2018/08/31 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
Python装饰器知识点补充
2018/05/28 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
售前工程师职业生涯规划
2014/03/02 职场文书
解除劳动合同证明书
2014/09/26 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
《假如》教学反思
2016/02/17 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
React配置子路由的实现
2021/06/03 Javascript
MySQL 条件查询的常用操作
2022/04/28 MySQL
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js