redux :2015年创建的科技术语

更新时间:2024-09-21 05:23

Redux由Dan Abramov在2015年创建的科技术语。是受2014年Facebook的Flux架构以及函数式编程语言Elm启发。Redux因其简单易学体积小在短时间内成为热门的前端架构。

软件简介

Redux对于ECMAScript应用而言是一个可预测状态的容器。换言之,它是一个应用数据流框架,而不是传统的像underscore.js或者AngularJS那样的库或者框架。

Redux最主要是用作应用状态的管理。简言之,Redux用一个单独的常量状态树(对象)保存这一整个应用的状态,这个对象不能直接被改变。当一些数据变化了,一个新的对象就会被创建(使用actions和reducers)。

Redux和Flux很像。主要区别在于Flux有多个可以改变应用状态的store,它通过事件来触发这些变化。组件可以订阅这些事件来和当前状态同步。Redux没有分发器dispatcher,但在Flux中dispatcher被用来传递数据到注册的回调事件。另一个不同是Flux中有很多扩展是可用的,这也带来了一些混乱与矛盾。

通常认为Redux只能与React或React Native一起使用,但事实上它可以与许多其他框架一起使用,如AngularJS、Vue.js、Polymer、Ember、Backbone.js等。这种灵活性使得Redux能够在不同的项目和技术栈中发挥作用,为开发者提供了一个统一的状态管理解决方案。

发展历程

Redux是由Dan Abramov和Andrew Clark于2015年创建的。Abramov在准备React Europe会议上的热重新加载演讲时开始编写第一个Redux实现。他试图制作一个可以更改逻辑的f.lux概念验证,它可以让他进行时间旅行,可以让他在代码更改时重新应用未来的操作。他被Flux模式与减少函数的相似性所震惊,并考虑如果Flux存储不是存储而是一个减少函数会怎样。他联系了Andrew Clark(Flummox的Flux实现作者)作为合作者,Clark帮助构建了一个连贯的API,并实现了中间件和存储增强等扩展点。自2016年中期以来,主要的维护者是Mark Erikson和Tim Dorr。2019年2月,useReducer作为React 16.8版本中的一个hook引入,提供了与Redux一致的API,使开发人员能够创建类似Redux的本地组件状态存储。

功能和服务

预测

始终有一个准确的数据源,就是store, 对于如何将actions以及应用的其他部分和当前的状态同步可以做到绝不混乱。

维护

具备可预测结果的性质和严格的组织结构让代码更容易维护。

组织

对代码应该如何组织更加严苛,这使代码更加一致,对团队协作更加容易。

测试

编写可测试代码的首要准则就是编写可以仅做一件事并且独立的小函数。Redux的代码几乎全部都是这样的函数:短小、纯粹、分离。

服务端渲染

可以带来更好的用户体验并且有助于搜索引擎优化,尤其是对于首次渲染。仅仅是把服务端创建的store传递给客户端就可以。

开发者工具

开发者可以实时跟踪在应用中正在发生的一切,从actions到状态的改变。

社区与生态圈

存在很多支持Redux的社区,使它能够吸引更多的人来使用。

Actions

简单地,Actions就是事件。Actions传递来自这个应用(用户接口,内部事件比如API调用和表单提交)的数据给store。store只获取来自Actions的信息。内部Actions就是简单的具有一个type属性(通常是常量)的ECMAScript对象,这个对象描述了action的类型以及传递给store的负载信息。

Actions通过action生成器创建,它们仅仅是是返回action的函数。

要在应用中的任何地方调用actions很容易,使用dispatch方法。

Reducers

在函数式JavaScript中reducer基于数组reduce方法,接收一个回调(reducer)让你从多个值中获得单个值,整数和,或者一个一系列值的累积。在Redux中,reducer就是获得这个应用的当前状态和事件然后返回一个新状态的函数。理解reducer是怎样工作的至关重要,因为它们完成大部分工作。这是一个非常简单的reducer,通过获取当前state和一个action作为参数,再返回下一个state:

对于更多复杂的项目,使用Redux提供的combineReducers()实例是必要的(推荐)。它把在这个应用中所有的reducer结合在一起成为单个索引reducer。每一个reducer负责它自己那部分应用的状态,这个状态参数和其他reducer的不一样。combineReducers()实例使文件结构更容易维护。

如果一个对象(state)只改变一些值,Redux就创建一个新的对象,那些没有改变的值将会指向旧的对象而且新的值将会被创建。这对性能是极好的。为了让它更有效率你可以添加 Immutable.js

Store

Store对象保存应用的状态并提供一些帮助方法来存取状态,分发状态以及注册监听。全部state由一个store来表示。任何action通过reducer返回一个新的状态对象。这就使得Redux非常简单以及可预测。

参考资料

免责声明
隐私政策
用户协议
目录 22
0{{catalogNumber[index]}}. {{item.title}}
{{item.title}}
友情链接: