Redux的理念算不上复杂,核心就是单向的动作,数据循环。概念也不多,action,action creator,reducer。但是深入的思考后,会发现它带来了很大的好处。除了各种文章讲的之外,聊聊我想到的
Reducer
reducer在一定程度上可以有model定义的作用。都知道JavaScript的特性,使得model很灵活,但同时也缺乏约束性。reducer能起到这样的约束作用,并且约束的严谨程度是可以根据实现的颗粒度来调节的,最低层度是能对数据的结构层次起到限制。如果能实现合适的点,能在JavaScript灵活性和约束之间实现很好的平衡。
前端数据的划分
mvc和mvvm是对前端数据的一种划分,但我一直觉得model和view model之间的区别是相当模糊的。在Basic Reducer Structure and State Shape文章,对前端数据做了更好的划分:domain state, app state, UI state。
domain state是最好理解的,app state和UI state会显得有的模糊。文中提到的当前选中项和网络请求中都是app state, 相应的组件状态是可以由这两个状态通过mapStateToProps映射的。除了显示弹窗外,至少文案,样式,语言都可以归到UI state的范畴内。
Action
action的目的是修改数据状态,那个action也可以根据state做划分:domain action,app action,UI action,至少还可以加一类network action。
那个action要表达是什么呢,我觉得是,伴随着这样的过程
behavior [ action => data change ]
前端通常都和交互有关,所以应该是这样
user interaction => behavior [ action => data change ]
但是user interaction不一定只触发一个behavior,比如你点了提交按钮,应该是这样的
user click
=> validate behavior [ action => data change ]
=> request behavior [ action => data change ]
在这样的模型下你可以把所有的前端行为拆成一个个很细的behavior,比方说validate behavior,alert behavior,confirm behavior。
Thunk middleware也可以理解成多个behavior的聚合。
前端一直在避免使用继承,Composition vs Inheritance也明确说到反对使用继承方式。那么在有非常高比例的公共逻辑下怎么解决复用问题呢?把前端的所有变化用behavior细条化,再由上层做聚合,是一种设计方式。