千锋教育-做有情怀、有良心、有品质的IT职业教育机构

400-811-9990
当前位置:千锋视频教程 > html5视频教程  >  HTML5学习之JavaScript中的Redux

HTML5学习之JavaScript中的Redux

时间:2018-04-17 11:09:09     来源:千锋视频教程 作者:千锋

  在React的使用过程中,经常会碰到组件间传值和共享状态的问题,这个时候为了方便管理和使用,我们会引进状态管理器,其中有一种就是redux。

  Redux 是 JavaScript 状态容器,提供可预测化的状态管理。可以让你构建一致化的应用,运行于不同的环境(客户端、服务器、原生应用),并且易于测试。Redux 和 React 之间没有关系。Redux 支持 React、Angular、Ember、jQuery 甚至纯 JavaScript。Redux 无依赖。

  Redux 可以用这三个基本原则来描述:

  1、单一数据源。整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。

  2、State 是只读的。唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象。

  3、使用纯函数来执行修改。为了描述 action 如何改变 state tree ,你需要编写 reducers。

  即Redux有三大概念,Action,Reducer和Store。

  Action本质上是jacascript的普通对象,通过store.dispatch()方法来触发定义的action,这是唯一改变state的方法。

  如:

1.jpg

  Reducer 是什么呢,Reducer 是用来处理数据逻辑的,具体就是根据 Action 处理 State 的函数。Action并没有指出如何处理数据,那么更新state就是reducer要做的事情了。

  在编写reducer的过程中,有两个问题。1、怎样设计 state 的数据结构?2、有了 state 结构,怎么编写 reducer?

  在 Redux 应用中,所有的 state 都被保存在一个单一对象中。通常,这个 state 树还需要存放其它一些数据。我们应该尽可能将其分离开。

  根据 State 结构编写 reducer时,redux 提供 combineReducers() 函数来调用我们编写的一系列 reducer,每个 reducer 根据它们的 key 来筛选出 state 中的一部分数据并处理,然后这个生成的函数所所有 reducer 的结果合并成一个大的对象。

  如

2.jpg

  Store是什么?action 用来描述“发生了什么”, reducers 会根据 action 更新 state。

  Store 就是把它们联系到一起的对象,是用来维持应用的 state 的。

  store有四个方法。getState: 获取应用当前 state。subscribe:添加监听器。dispatch:分发 action。更新 state。replaceReducer:替换 store 当前用来处理 state 的 reducer。常用的是dispatch,这是修改State的唯一途径,使用起来也非常简单。

  简单来说,Redux 应用只有一个单一的 store。当需要拆分处理数据的逻辑时,使用 reducer 组合,而不是创建多个 store。combineReducers是用来合并reducer的,因为creatstore只能有一个reducer,但是一个reducer又只对应一个状态。单个reducer是一个纯函数,定义了初始状态和action,必须给初始状态赋值,必须有返回值。

  • 北京天丰利校区(总部):北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼2层、南区服务楼2层
    咨询电话:400-186-9990 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、大数据开发培训、VR/AR混合
    现实培训、Python培训、Linux云计算培训、软件测试培训、Android培训、iOS培训、好程序员
  • 深圳西部硅谷校区地址:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619
    深圳大学城校区地址:深圳市南山区留仙大道1201号大学城创客小镇16栋2楼、3楼
    咨询电话:0755-33582485-801(硅谷校区)0755-86660670-801(大学城校区)
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android培训、iOS培训
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-627-7899 021-56166283/56166279
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训、好程序员
  • 郑州校区地址:郑州市金水区纬五路21号河南教育学院综合楼(经纬中学楼)7/8层
    咨询电话:0371-55191750 400-186-9990
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 广州校区地址:广州市天河区元岗路310号智汇park创意园E座5层
    咨询电话:020-22119207 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 大连校区地址:辽宁省大连市甘井子区软件园路2号东软信息学院B5座一楼
    咨询电话:0411-39026086 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、UI交互设计培训、Android课程培训、iOS课程培训
  • 武汉校区地址:武汉市光谷大道61号智慧园21号楼2层
    咨询电话:027-65523826
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 成都校区地址:成都市武侯区科华北路62号力宝大厦N(北楼)18楼
    咨询电话:028-83178771
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85260160
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训
  • 杭州校区地址:浙江省杭州市江干区九堡旺田书画城A座4层
    咨询电话:0571-86893632 010-82790226-801
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 青岛校区地址:青岛市市南区金坛路17号青岛职业技术学院南校区实训楼A4层
    咨询电话:0532-80910752/3 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:023-68883009
    面授课程:JavaEE+云数据课程培训
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:0731-85513010/85513210
    面授课程:JavaEE+云数据课程培训
  • 哈尔滨校区地址:哈尔滨市松北区创新一路699号科技创新城19号楼五楼
    咨询电话:15663846969
    面授课程:全栈HTML5+培训
  • 千锋教育服务号

    了解千锋动态
    关注千锋教育服务号

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱