一、前言
Redux并不是一门语言,也不是一个框架,不过可以理解为是一种数据流框架,而不是我们平常用的React类似的UI框架。Redux更像是一种思想或者设计模式。以数据对象为核心,根据不同的事件类型,响应不同的状态,然后执行状态修改之后的事件。这里其实跟我上一篇的博客,面向过程与面向对象的区别可以结合着看。
先说一下这种思想的步骤:
1. 以数据对象为核心,具体说是数据状态;
2. 分析业务场景,抽取事件类型;
3. 根据不同的事件类型改变相应的状态;
4. 执行改变状态之后的事件。
二、案例
点击一个按钮,使其颜色变成红色,再次点击,恢复原始颜色,以此类推。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>React App</title>
</head>
<body>
<button id="btn">点击改变我的颜色</button>
</body>
<script src="redux.js"></script>
</html>
我们一般会像下面这样写(一种面向过程的编程方式):
方式1:
//1、获取当前按钮
var btn =document.getElementById('btn');
//2、执行事件
btn.onclick=function () {
if(btn.style.background == 'red'){
btn.style.background = '';
}else {
btn.style.background = 'red';
}
};
redux主角上场(面向数据,面向对象的编程方式):
方式2:
//一、准备阶段
//1.抽取相关数据状态(初始状态)
var stateOri={
background:''
};
//2.事件类型,分为变成红色(beRed)或恢复(reset)
var action = {
type:'reset',
background:''
};
var action1 = {
type:'beRed',
background:'red'
};
//3.根据不同的type类型响应不同的状态
function changeState(action,state) {
switch (action.type){
case 'beRed':
return{
background:action.background,
};
case 'reset':
return{
background:action.background,
};
default:
return state;
}
}
//4.改变状态之后的执行事件
function changeBg(state) {
btn.style.background = state.background;
}
//二、实施阶段
//1、封装一个redux,向外暴露出getState(获取state)、dispatch(事件分发)、subscribe(事件订阅)
function createStore(state,reducer) {
var listeners = [];
var getState = function () {
return state;
};
var dispatch = function (action) {
state = reducer(action,state);
listeners.forEach(function (listener) {
listener(state);
})
};
var subscribe =function (listener) {
listeners.push(listener);
};
return {getState:getState,dispatch:dispatch,subscribe:subscribe}
}
//2、获取一个redux
var store = createStore(stateOri,changeState);
//3、执行dispatch改变状态
btn.onclick=function () {
if(store.getState().background==''){
store.dispatch(action1);
}else {
store.dispatch(action);
}
};
//4、执行改变状态之后的事件
store.subscribe(function () {
var NewState = store.getState();
changeBg(NewState);
});
三、总结
1. 在此再深入一下面向过程与面向对象的区别,从本案例看,只是执行一个点击改变颜色,再次点击恢复颜色的动作,以面向过程的思维用以上的方式1显然看起来更简单一些。印证了上一篇面向过程与面向对象的区别中提到的:不是很复杂的需求使用面向过程效率更高。但是如果我们需求比较复杂,不仅要改变背景颜色,还要做其他工作,改变字体颜色,字号,大小,与其他元素交互等等,如果以redux思路使用方式2,只需要根据传入不同的事件类型,改变相应的状态,然后执行改变状态之后的事件。从长远的角度来说,代码会更有利于维护,你只需要围绕数据状态去做一系列的工作。
2. redux思想即为数据状态管理思想,综合以上案例详细说明:
第一步,根据业务场景抽离数据状态(本案例业务场景是点击按钮改成红色,再次点击恢复颜色,那么数据状态就是颜色background);
第二步,抽离出事件类型(本案例的事件类型有,变成红色beRed和恢复颜色reset);
第三步,根据不同的事件类型改变状态(如果传入的类型为红色,则返回相应的颜色状态,反之,返回对应的颜色状态);
第四步,执行改变状态之后的事件(改变颜色状态之后设置btn的颜色)。