React-redux基础

2019-02-12 admin

前言

在学习了React之后, 紧跟着而来的就是Redux了~

在系统性的学习一个东西的时候, 了解其背景、设计以及解决了什么问题都是非常必要的。 接下来记录的是, 我个人在学习Redux时的一些杂七杂八~

Redux是什么

通俗理解

https://www.zhihu.com/questio…

介绍

先从官方的一句介绍看起:

Redux is a predictable state container for JavaScript apps. (Redux是Javascript应用程序的可预测状态容器。)

当然,假如你在这之前并没有接触过相关的状态管理库或者框架, 看到这句话时是非常的懵逼的, 不过可以带着这句话来一步步探索~

背景

随着Javascript单页面应用开发日趋复杂,JavaScript 需要管理比任何时候都要多的 state (状态)。 这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据,也包括 UI 状态,如激活的路由,被选中的标签,是否显示加载动效或者分页器等等。管理不断变化的 state 非常困难。如果一个 model 的变化会引起另一个 model 变化,那么当 view 变化时,就可能引起对应 model 以及另一个 model 的变化,依次地,可能会引起另一个 view 的变化。直至你搞不清楚到底发生了什么。 – Redux文档

上面这一大段引用概况起来就是一句话, state(状态)在什么时候什么地方,因为什么而变化成了一个不受控制的过程。(这不能忍,状态如果无法预测以及控制)

那么Redux就是试图让state的变化变得可预测。这些限制条件反映在 Redux 的三大原则中。

核心概念

1.Redux使用普通的对象来描述state,这个对象就是Modal。 image

2.要想更新 state 中的数据,你需要发起一个 action。Action 就是一个普通 JavaScript 对象用来描述发生了什么。

image

3.为了把 action 和 state 串起来,开发一些函数,这就是 reducer。reducer 只是一个接收 state 和 action,并返回新的 state 的函数。 image

三大准则

  1. 只有一个state树。
  2. state是只读的,只能通过action改变。
  3. reducer是纯函数,没有副作用。

了解到这些后,其实已经多少能明白Redux is a predictable state container for JavaScript apps. (Redux是Javascript应用程序的可预测状态容器。)这句话,为什么是可预测的? 因为只有一个state树,并且它是只读的,而且只能通过action来改变(改变的过程变得清晰可追踪),并且获取state(状态)只能通过reducer,而reducer是一个纯函数(此处了解state是重点),没有副作用,也就意味着我们能知道我们最终得到的state是什么样的。

api简介

createStore(reducer, [preloadedState], [enhancer]) 创建store的函数,返回一个对象, 包含getStatedispatchsubscribegetReducerreplaceReducer等方法

combineReducers(reducers) 合并多个reducer

applyMiddleware(…middlewares) 中间件处理,在 实际的dispatch前调用一系列中间件, 类似于koa

bindActionCreators(actionCreators, dispatch) 绑定action和dispatch

compose(…functions) 函数式编程中常见的方法, compose(funcA, funcB, funcC) => compose(funcA(funcB(funcC())))

React-redux

介绍

Redux官方提供的 React 绑定库。 具有高效且灵活的特性

动机

React是以组件化的形式开发。为了组件的复用以及代码的清晰,通常我们将组件分为容器组件以及UI组件

关于容器组件和UI组件,推荐阅读该文章,而引入了React-redux可以很好的帮助我们分离容器组件和UI组件。

为什么选择react-redux

  • react-redux是官方提供的绑定库,由redux开发者维护,可以很好的与redux保持同步。
  • 它鼓励组件分离。react-redux协助我们分离容器组件和UI组件,通过提供API连接store(提供数据)和UI组件,并且使得UI组件不需要知道存在Redux(复用)。
  • 性能优化。虽然React速度很快,但是re-redering是非常消耗性能的,而react-redux的内部做了许多性能优化。
  • 社区支持,因为是官方指定的绑定库,所以拥有大量的使用者,社区活跃度高,问题也容易解决。

api简介

<Provider store>

使组件层级中的 connect() 方法都能够获得 Redux store。 store: 应用程序中唯一的 Redux store 对象

connect(mapStateToProps, mapDispatchToProps, mergeProps, options)

mapStateToProps(state, [ownProps]): stateProps: 映射state作为UI组件的props

mapDispatchToProps(dispatch, [ownProps]): dispatchProps: 映射dispatch作为UI组件的props

mergeProps(stateProps, dispatchProps, ownProps): props: 如果指定这个函数, 即合并mapStateToPropsmapDIspatchToPropsoweProps作为UI组件的props

options: 定制 connector 的行为

Redux存在的问题

与其说缺点,不如说是Redux的优势而造成的不可避免的劣势,问题应该辩证地看~

  • 纯净。Redux只支持同步,让状态可预测,方便测试。 但不处理异步、副作用的情况,而把这个丢给了其他中间件,诸如redux-thunkredux-promiseredux-saga等等,选择多也容易造成混乱~
  • 啰嗦。那么写过Redux的人,都知道actionreducer以及你的业务代码非常啰嗦,模板代码非常多。但是~,这也是为了让数据的流动清晰明了。
  • 性能。粗暴地、级联式刷新视图(使用react-redux优化)。
  • 分型。原生 Redux-react 没有分形结构,中心化 store;

Redux的最佳实践

vuex(dva)

事实上,如果用过vuex或者dva的话, 个人觉得还是会比较偏向于这种用法。比起Redux的啰嗦,dva帮忙简化了很多步骤。具体的实现后续补充~

这里先补充一点,vuex不是immutable,所以对于时间旅行这种业务不太友好。

Redux的实现浅析

前言

Redux的代码相对比较简单,容易理解, 源码的解读推荐看这篇文章, 本段主要是对代码里一些个人觉得比较有意思的点进行分析~

createStore

在这里看出,redux即使是在内部,也是函数式编程~ 当我们传入了一个enhancer函数(即中间件),会把createStore本身当成参数传给enhancer然后返回一个新的函数来调用 即 fn => fn image

暴露出的subscribe函数也是挺有意思的, 首先是isSubscribed这个变量, 其实就是一种非常基础的闭包使用

然后是每次订阅或者取消订阅的时候,都会在dispatch之前保存一次快照, 然后当前的dispatch用的是上一份快照,而下一个dispatch则是使用当前这一份的快照 image

compose

非常简洁的写出了函数式编程的一个常用函数(…args) => f(g(h(…args))).

image

combineReducer

可以看出,每一次action都会重新计算所有的reducer~ 但如果不是非常巨大的state树,并且拆分了很多模块,个人认为其实影响不大

image

bindActionCreator和applyMiddleware相对容易理解, 这里就不赘述啦

原文链接:https://segmentfault.com/a/1190000018127764

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-53607.html

文章标题:React-redux基础

相关文章
VSCode配置react开发环境的步骤
vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想。 通过搭配使用 ...
2017-12-28
深入理解JavaScript的React框架的原理
如果你在两个月前问我对React的看法,我很可能这样说: 我的模板在哪里?javascript中的HTML在做些什么疯狂的事情?JSX开起来非常奇怪!快向它开火,消灭它吧! 那是因为我没有理解它. 我发誓,React 无疑是在正确的轨道...
2017-03-26
AngularJS基础知识笔记之过滤器
过滤器是用来更改修改数据,并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。 S.No. 名称 描述 1 大写 转换文本为大写文本。 2 小写 转换文本为小写文本。 3 货币 货币格式格式文本。 4 过滤器 过滤数组中它根...
2017-03-23
AngularJS基础知识笔记之表格
表格数据本质上通常是重复的。ng-repeat指令,可以用来方便地绘制表格。下面的示例说明使用ng-repeat指令来绘制表格。 &lt;table&gt; &lt;tr&gt; &lt;th&gt;Name&lt;&#x2F;t...
2017-03-23
AngularJS基础学习笔记之指令
AngularJS通过指令将HTML属性进行了扩展。 AngularJS指令 AngularJS指令是带有ng-前缀的扩展HTML属性。 ng-app指令用来初始化AngularJS application。 ng-init指令用来初始化a...
2017-03-23
AngularJS学习第一篇 AngularJS基础知识
AngularJS学习第一篇,了解指令、过滤器等相关内容。 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng- 1、 ng-app: 定义了 AngularJS 应用程序的根元素; ng-app 指令在网页加载完毕时会...
2017-03-17
AngularJS基础学习笔记之控制器
AngularJS控制器用来控制AngularJS applications的数据。 AngularJS控制器就是普通的JavaScript对象。 AngularJS控制器 AngularJS applications通过控制器进行控制。 ...
2017-03-23
Bootstrap基础学习
Bootstrap是一个基于栅格结构的前端结构框架(当然也有JS,JQuery),它的优点是内容框架能够迅速搭建起来,基于媒介查询可以使搭建的页面迅速的适应不同的用户端,无论是手机,平板,还是PC,基本上都能自适应,当然新版本已经开始不支持...
2017-03-24
一个适合新手的react小demo
之前一直都是在用vue,这两个月换了个公司,不过现在又离职了,这里什么框架都用, vue、angular、react,一般公司都是选二项技术去开发已经就够了, 要不是vue+angular或是react+angular个人觉得用了vue还来...
2018-01-11
bootstrap fileinput 上传插件的基础使用
前言: 之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了。前两天做一个excel导入的功能,前端使用原始的input type='file’这种标签,效果不忍直视,于是博主下定决心要找一个...
2017-03-16
回到顶部