Redux
Redux由Dan Abramov在2015年创建的科技术语。是受2014年Facebook的Flux架构以及函数式编程语言Elm启发。
很快,Redux因其简单易学体积小在短时间内成为最热门的前端架构。
简介
Redux对于JavaScript应用而言是一个可预测状态的容器。
换言之,它是一个应用数据流框架,而不是传统的像underscore.js或者AngularJs那样的库或者框架。
Redux最主要是用作应用状态的管理。
简言之,Redux用一个单独的常量状态树(对象)保存这一整个应用的状态,这个对象不能直接被改变。
当一些数据变化了,一个新的对象就会被创建(使用actions和reducers)。
差异
Redux和Flux很像。主要区别在于Flux有多个可以改变应用状态的store,它通过事件来触发这些变化。
组件可以订阅这些事件来和当前状态同步。Redux没有分发器dispatcher,但在Flux中dispatcher被用来传递数据到注册的回调事件。
另一个不同是Flux中有很多扩展是可用的,这也带来了一些混乱与矛盾。
优点
在应用中使用Redux有如下好处:
预测始终有一个准确的数据源,就是store, 对于如何将actions以及应用的其他部分和当前的状态同步可以做到绝不混乱。
维护具备可预测结果的性质和严格的组织结构让代码更容易维护。
组织对代码应该如何组织更加严苛,这使代码更加一致,对团队协作更加容易。
测试编写可测试代码的首要准则就是编写可以仅做一件事并且独立的小函数。Redux的代码几乎全部都是这样的函数:短小、纯粹、分离。
服务端渲染可以带来更好的用户体验并且有助于搜索引擎优化,尤其是对于首次渲染。仅仅是把服务端创建的store传递给客户端就可以。
开发者工具开发者可以实时跟踪在应用中正在发生的一切,从actions到状态的改变。
社区与生态圈存在很多支持Redux的社区,使它能够吸引更多的人来使用。
核心概念
Redux核心概念有三个:
actions
store
reducers
Actions
简单地,Actions就是事件。Actions传递来自这个应用(用户接口,内部事件比如API调用和表单提交)的数据给store。
store只获取来自Actions的信息。
内部Actions就是简单的具有一个type属性(通常是常量)的JavaScript对象,这个对象描述了action的类型以及传递给store的负载信息。
Reducers
在函数式JavaScript中reducer基于数组reduce方法,接收一个回调(reducer)让你从多个值中获得单个值,整数和,或者一个一系列值的累积。
在Redux中,reducer就是获得这个应用的当前状态和事件然后返回一个新状态的函数。
理解reducer是怎样工作的至关重要,因为它们完成大部分工作。
这是一个非常简单的reducer,通过获取当前state和一个action作为参数,再返回下一个state:
Store
Store对象保存应用的状态并提供一些帮助方法来存取状态,分发状态以及注册监听。全部state由一个store来表示。
任何action通过reducer返回一个新的状态对象。这就使得Redux非常简单以及可预测。