Redux(二):Redux的基本原理

Redux的学习前提

首先声明本文章仅仅是 本人对Redux工作模式的理解，本人也没学透彻，大部分想法靠猜，如果错了，不要打我

1. Redux的官方文档:阅读基本原理
2. Redux淘宝团队的技术文档:重点在于为什么需要Redux这个东西
3. Redux腾讯团队的技术文档:理解React-Redux和Redux是不一样的

正如文章Redux产生的原因里提到的 Redux和React-Redux不是同一个东西！！！不是同一个东西！！

• Redux是个基于Key Value Observer模式的数据管理工具
• React-Redux仅仅是为了让React使用Redux的时候少写几行代码的工具

Redux的Key Value Observer

Redux提供了三个基本方法

功能	作用
Action	发送消息给Reducer
Reducer	接受消息，并且执行相应逻辑
Store	保存数据

所谓KVO这种设计模式，说白了就是

1. 一个独立的线程(一般使用单例Singleton)进行死循环
2. 不停的等待接收消息，消息中必须包含一个Key字段
3. 接收到消息后，根据Key字段执行相应的逻辑操作

先看一段更改后的淘宝团队的示例代码 看之前先去看懂ES6的Arrow Function语法

//发送消息的Action
const actions = {
  increase: () => {
    let actionObject = {type: 'INCREASE', increaseDelta: 1};
    return actionObject;
    },
  decrease: () => {
    let actionObject = {type: 'DECREASE', decreaseDelta: -1};
    return actionObject;
  }
}

//接收消息进行逻辑处理的Reducer
const reducer = (preState = {count: 0}, actionObject) => {
  let updateState = {count: 0};
  switch (action.type){
    case 'INCREASE':
        updateState = {count: preState.count + actionObject.increaseDelta};
        return updateState;
    case 'DECREASE':
        updateState = {count: preState.count + actionObject.decreaseDelta};
        return updateState;
    default:
        return updateState;
  }
}

//储存数据的store
const store = createStore(reducer);

//触发消息，相当于Trigger或者Fire
store.dispatch(actions.increase()) // {count: 1}
store.dispatch(actions.increase()) // {count: 2}
store.dispatch(actions.increase()) // {count: 3}

//查看State
store.subscribe(() =>
  console.log(store.getState())
);

提供消息的Action分析

1. Action是一个Object
2. Object内有两个变量 increase 和 decrease
3. 两个变量都是方法变量，指向一个无参数，返回值为Object的方法
4. 返回的Object必须包含一个为type的字段，这个字段就是KVO里的key字段
5. 返回值还可以带一些其它字段increaseDelta来传递数据

接收消息的Reducer分析

1. reducer本身变量，指向一个方法
2. 指向的方法是一个含有两个参数(preState, actionObject),给preState一个默认参数{count:0}
3. preState是当前情况下Store内部的数据，就是旧数据
4. 内部就十分暴力了。。。就是一个Switch….Case…..
5. 方法返回值一个updateState，是通过逻辑计算后更新的数据
6. 由于方法入参还包括action，所以可以使用action带来的新数据increaseDelta进行更新

储存数据的Store分析

1. 储存数据的Store需要使用reducer作为参数以createStore方法进行初始化
2. reducer本身是个含有两个参数的方法，所以说reducer是一个回调函数
3. store自身还有一个方法叫做dispatch，可以接收一个Object
4. 接收的Object就是Action方法的返回值actionObject
5. dispatch函数就是一个触发方法，通过调用该函数，进入回调函数reducer进行逻辑处理
6. store内部储存数据的部分叫做State，可以通过getState方法查看

！！最最最最重要的！！ 这个state是Store内部的一个变量，和React的Component内部数据State一毛钱的关系都没有 为毛所有教程都没写这个啊。。难道是因为我智商太低。。大家都觉得不用写么？所以说大家一定不要混淆这个概念

React-Redux如何减少代码量

直接使用Redux不使用React-Redux

根据文章Redux产生的原因中提到，在React的概念中，props是一个Component唯一通向外部的通道，如果我们有两个不同层级的Component，需要通过props进行一层层的传递数据，例如淘宝团队的示例

class App extends Component{

  componentWillMount(){
    store.subscribe((state)=>this.setState(state))
  }

  render(){
    return <Comp state={this.state}
                 onIncrease={()=>store.dispatch(actions.increase())}  <==通道层
                 onDecrease={()=>store.dispatch(actions.decrease())}  <==通道层
    />
  }
}

这样写起来太麻烦了，所以需要使用React-Redux，参考文章React-Redux基本原理

赏

请问老板还招人么(/ω＼)

支付宝

微信