前言
对于工作遇到些不开心的事,我也只能说,运气不好吧,算了不提,React这东西是不难,搭个状态处理,真的是什么一下子维护很多文件夹。
不过,vue还真是出了名简单,上手难度就在vuex api哪里。其他真的是把ng整个组件传值,模板语言拿过来,换汤不换药。
(一)Redux 特点
Redux顾名思义(Reducer+Flux)
1. 唯一数据源
唯一数据源指的是应用的状态数据应该只存储在唯一的一个 Store 上 。
我们已经知道,在 Flux 中,应用可以拥有多个 Store ,往往根据功能把应用的状态数据划分给若干个 Store 分别存储管理 。
如果状态数据分散在多个 Store 中,容易造成数据冗余,这样数据一致性方面就会出问题 。 虽然利用 Dispatcher 的 waitFor 方法可以保证多个 Store 之间的更新顺序,但是这又产生了不同 Store 之间的显示依赖关系,这种依赖关系的存在增加了应用的复杂度,容
易带来新的问题。
2.保持状态只读
保持状态只读,就是说不能去直接修改状态,要修改 Store 的状态,必须要通过派发一个 action 对象完成,这一点 ,和 Flux 的要求并没有什么区别 。
3. 数据改变只能通过纯函数完成
Reducer 不是一个 Redux 特定的术语,就以 JavaScript 为例,在ES5的数组高阶API
ES5, ES6 常用数组API请参考下面
[1, 2 , 3 , 4] .reduce(function reducer(previousValue, currentValue) {
return previousValue+ currentValue
} , 1);
reduce最后一个为默认参数, 如果不设置就将数组第一个为默认值。
在 Redux 中, 每个 reducer 的函数签名如下所示 :
reducer(state , action)
第一个参数 state 是当前的状态,第二个参数 action 是接收到的 action 对象,而 reducer函数要做的事情,就是根据 state 和 action 的值产生一个新的对象返回,注意 reducer 必须是纯函数,也就是说函数的返回结果必须完全由参数 state 和 action 决定,而且不产生任何副作用,也不能修改参数 state 和 action 对象。
比对Flux和Redux处理Store的差别
CounterStore.dispatchToken = AppDispatcher.register((action ) => {
if (action.type === ActionTypes .INCREMENT) {
counterValues[action.counterCaption) ++;
CounterStore.emitChange() ;
} else if (action.type === ActionTypes.DECREMENT) {
counterValues[action.counterCaption]
CounterStore.emitChange() ;
}
});
Flux 更新状态的函数只有一个参数 action ,因为状态是由 Store 直接管理的,所以
处理函数中会看到代码直接更新 state ;
在 Redux 中,一个实现同样功能的 reducer 代码
如下:
function reducer(state , action) => {
const {counterCaption} = action;
switch (action.type) {
case Act