第3章 从Flux到Redux

第3章 从Flux到Redux

3.1 Flux

单向数据流，React是用来替换Jquery的，Flux是以替换Backbone.js、Ember.js等MVC框架为主的。

actionTypes.js定义action类型；

actions.js定义action构造函数，决定了这个功能模块可以接受的动作；

reducer.js定义这个功能模块如何响应action.js中定义的动作；

views目录，包含这个功能模块中所有的React组件，包括傻瓜组件和容器组件；

index.js这个文件把所有的角色导入，然后统一导出。

一个Flux应用包含四个部分：

Dispatcher，处理动作分发，维持Stror之间的关系；

Store，负责存储数据和处理数据相关逻辑；

Action，驱动dispatcher和JavaScript对象；

View，视图部分，负责显示用户界面。

如果非要把Flux 和MVC 做一个结构对比，那么， Flux 的Dispatcher 相当于MVC 的Controller, Flux 的Store 相当于MVC 的Model, Flux 的View 当然就对应MVC 的View了，至于多出来的这个Action ，可以理解为对应给MVC 框架的用户请求。

MVC最大的缺点就是无法禁绝View和Model之间的直接对话。

Flux应用实例：

1、Dispatcher

　　首先创造一个Dispatcher，Dispatcher的作用就是派发action，几乎所有应用都只需拥有一个Dispathcer，在src下创造一个唯一的Dispatcher对象

import {Dispatcher} from 'flux'

export default new Dispacther()

2、Action

　　代表一个动作，一个纯粹的数据对象。

　　action对象必须有一个名为type的字段，代表这个action对象的类型，为了记录日志和debug方便，这个type应该是字符串类型。

　　定义action通常需要两个文件，一个定义action类型，一个定义actio的构造函数（也称为action creator）。原因是store会根据action不同类型做不同操作。

　　在src/Actiontypes.js中，定义action的类型

//两个action类型 INCREMENT和DECREMENT，一个是点击+按扭，一个是点击-按扭
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

　　在src/Action.js中，定义action的构造函数，这里边定义的并不是action对象本身，而是能够产生并派发action对象的函数。

//引入ActionTypes和AppDispatcher，直接使用Dispatcher
import * as ActionTypes from './ActionTypes'
import AppDispatcher from './AppDispatcher'

//Action.js导出了两个action的构造函数increment和decrement，当这两个构造函数被调用的时候，创造了对象的action对象，并立即通过AppDispatcher.dispatch函数派发出去。
export const increment = (counterCaption) => {
    AppDispatcher.dispatch({
        type: ActionTypes.INCREMENT,
        counterCaption: counterCaption
    })
}

export const decrement = (counterCaption) => {
    AppDispatcher.dispatch({
        type: ActionTypes.DECREMENT,
        counterCaption: counterCaption
    })
}

3、Store

　　一个Store也是一个对象，这个对象存储应用状态，同时还要接受Dispatcher派发的动作，根据动作来决定是否要更新应用状态。

　　当Store的状态发生变化时，需要通知应用的其它部分做出响应，做出响应的当然是view部分，但是我们硬编码这种联系，应该用消息的方式建立Store和View的联系。这就是为什么让CounterStore 扩展成了EventEmitter.proptype，等于让CounterStore成了一个EventEmitter对象。

一个EventEmitter的实例对象支持下列相关函数：

emit函数，可以广播一个特定事件，第一个参数是字符串类型的事件名称；

on函数，可以增加一个挂在这个EventEmitter对象特定事件上的处理函数，第一个参数是字符串类型的事件名称，第二个参数是处理函数；

removeListener函数，和on函数做的事情相反，删除挂在这个EventEmitter对象特定事件上的处理函数，参数一样。

import AppDispatcher from '../AppDispatcher'
import * as ActionTypes from '../ActionTypes'
import {EventEmitter} from 'events'
import { Action } from 'rxjs/internal/scheduler/Action';

const CHANGE_EVENT = 'change'

const counterValues = {
    'First': 0,
    'Second': 10,
    'Third': 20
}

const CounterStore = Object.assign({},EventEmitter.prototype,{
    //让应用的其它模块可以读取当前的计数值
    getCounterValues:function(){
        return counterValues
    },
    //对CounterStore状态更新的广播
    emitChange:function(){
        this.emit(CHANGE_EVENT)
    },
    //添加监听函数
    addChangeListener:function(callback){
        this.on(CHANGE_EVENT, callback)
    },
    //删除监听函数
    removeChangeListener:function(callback){
        this.removeListener(CHANGE_EVENT, callback)
    }
})

把CounterStore注册到全局唯一的Dispatcher上去。Dispatcher有一个函数叫register，接受一个回调函数作为参数。返回值是一个token，这个token用于Sotre之前的同步，在CounterStore中暂时用不到。

//把register返回值保存在CounterStore对应的dispatchToken字段上
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()
    }
})

export default CounterStore

　Flux的核心：当通register函数把一个回调函数注册到Dispatcher之后，所有派发给Dispatcher的action对象，都会传递到这个回调函数中来。

import React, {Component} from 'react'
import Counter from './Counter'

class ControlPanel extends Component{

    render() {
        return (
            <div>
                <Counter caption='First' />
                <Counter caption='Second' />
                <Counter caption='Third' />
            </div>
        )
    }
}

export default ControlPanel

　　

import React, {Component} from 'react'
import * as Actions from '../Action'
import CounterStore from '../stores/CounterStore'
const buttonStyle = {
    margin: '10px'
}
class Counter extends Component{
    constructor(props){
        super(props)
        // console.log('enter constructor',props.caption)

        this.add = this.add.bind(this)
        this.math = this.math.bind(this)
        this.onChange = this.onChange.bind(this)
        this.state={
            count: CounterStore.getCounterValues()[props.caption]
        }
    }

    shouldComponentUpdate(nextProps, nextState){
        return (nextProps.caption !== this.state.caption ||
                nextProps.count !== this.state.count)
    }

    componentDidMount(){
        CounterStore.addChangeListener(this.onChange)
    }

    componentWillUnmount(){
        CounterStore.removeAllListeners(this.onChange)
    }

    onChange(){
        const newCount = CounterStore.getCounterValues()[this.props.caption]
        this.setState({count: newCount})
    }

    add(){
        Actions.increment(this.props.caption)
    }

    math() {
        Actions.decrement(this.props.caption)
    }

    render(){
        console.log('enter render', this.props.caption)
        return(
            <div>
                <button style={buttonStyle} onClick={this.add}>+</button>
                <button style={buttonStyle} onClick={this.math}>-</button>
                <span>count:{this.state.count}</span>
                {/* <span>props:{this.props}</span> */}
            </div>
        )
    }
}
Counter.defaultProps={
    initValue: 0,
    onUpdate: f => f //默认是一个什么都不做的函数
}

export default Counter

4、View

存在于flux框架中的React组件需要实现以下几个功能：

创建时要读取Store上状态来初始化组件内部状态；

当Store上状态发生变化时，组件要立刻同步更新内部保持状态一致；

View如果要改变Store状态，必须并且只能派发action。

5、Flux的不足

　　1.Store之间的依赖关系

　　在Flux体系中，如果两个Store之间有逻辑关系，就必须用上Dispatcher的waitFor函数。

　　2.难以进行服务器渲染

　　3.Store混杂了逻辑和状态

　　Store封装了数据和处理数据的逻辑，当我们需要替换一个Store的逻辑时，只能把整个Store整体替换掉，无法保持Store中的存储状态。

3.2 Redux

Redux的三个基本原则：

唯一数据源(Single Source of Truth)；

保持状态只读(State is read-only)；

数据改变只能通过纯函数完成(Changes are made with pure functions)。

1、唯一数据源

　　唯一数据源指的是应用的状态数据应该只存储在唯一的一个Store上。

　　Flux是状态数据分散在多个Store中，容易造成数据冗余。

　　Redux就是整个应用只有一个Store，所有组件的数据源就是这个Store上的状态。

　　这个唯一Store上的状态，是一个树的形象。

2、保持状态只读

　　不能去直接修改状态，要修改Store的状态，必须要通过派发一个action对象完成，这一点和flux没区别。

3、数据改变只能通过纯函数完成

　　纯函数就是Reducer，Redux就是Reducer+Flux。

3.2.2 Redux实例

ActionTypes.js

export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

Action.js

import * as ActionTypes from './ActionTypes'
export const increment = (counterCaption) => {
    //Redux返回一个action 对象
   return {
        type: ActionTypes.INCREMENT,
        counterCaption: counterCaption
    }
}

export const decrement = (counterCaption) => {
    return {
        type: ActionTypes.DECREMENT,
        counterCaption: counterCaption
    }
}

　　

Store.js

这个文件输出全局唯一的Store

import {createStore} from 'redux'
import reducer from './Reducer'

const initValues = {
    'First' : 0,
    'Secont' : 10,
    'Third' : 20
}
//第一个参数代表更新状态，第二个参数代表初始状态，第三个参数Store Enhancer，暂时用不上
const store = createStore(reducer, initValues)

export default store

　　

Reducer.js

和Flux应用中注册的回调函数一样，与Flux不同的是多了一个state,Flux中没有，是因为state是由Store管理而不是由Flux。

Redux把存储state的工作抽取出来交给Redux框架本身，让reducer只关心如何更新state，而不管state怎么存。

import * as ActionTypes from './ActionTypes'

export default (state, action) => {
    const {counterCaption} = action
    /**
     * return {...state,[counterCaption] : state[counterCaption] + 1}等同于
     * const newState = Object.assign({},state)
     * newState[counterCaption] ++
     * return newState
     */
    switch (action.type) {
        case ActionTypes.INCREMENT:
        //...操作符，表示把state所有字段扩展开
            return {...state,[counterCaption] : state[counterCaption] + 1}
        case ActionTypes.DECREMENT:
            return { ...state, [counterCaption]: state[counterCaption] - 1 }
        default:
            return state;
    }
}

　ControlPanel.js

import React, {Component} from 'react'
import Counter from './Counter'
import SumCounter from './SumCounter'

class ControlPanel extends Component{

    render() {
        return (
            <div>
                <Counter caption='First' />
                <Counter caption='Second' />
                <Counter caption='Third' />
                <SumCounter />
            </div>
        )
    }
}

export default ControlPanel

　Counter.js

import React, {Component} from 'react'
import * as Actions from '../Action'
import store from '../Store'
const buttonStyle = {
    margin: '10px'
}
class Counter extends Component{
    constructor(props){
        super(props)
        // console.log('enter constructor',props.caption)

        this.add = this.add.bind(this)
        this.math = this.math.bind(this)
        this.getOwnState = this.getOwnState.bind(this)
        this.onChange = this.onChange.bind(this)
        this.state = this.getOwnState()
    }

    getOwnState(){
        // console.log(store.getState(),'state')
        return {
            value: store.getState()[this.props.caption]
        }
    }

    componentDidMount(){
        //通过Store的subscribe监听其变化，只要Store的状态发生变化就会调用这个组件的onChange方法。
        //增加监听的函数也可以写到构造函数中
        store.subscribe(this.onChange)
    }
    componentWillUnmount(){
        //把监听注销
        store.unsubscribe(this.onChange)
    }
    onChange(){
        this.setState(this.getOwnState())
    }

    add(){
        //派发action
        //action构造函数只负责创建对象，要派发action就需要调用store.dispatch函数
        store.dispatch(Actions.increment(this.props.caption))
        // Actions.increment(this.props.caption)
    }

    math() {
        store.dispatch(Actions.decrement(this.props.caption))
        // Actions.decrement(this.props.caption)
    }

    render(){
        const value = this.state.value
        const {caption} = this.props
        return(
            <div>
                <button style={buttonStyle} onClick={this.add}>+</button>
                <button style={buttonStyle} onClick={this.math}>-</button>
                <span>{caption} count:{value}</span>
            </div>
        )
    }
}

export default Counter

　　SumCounter.js

import React, {Component} from 'react'
import store from '../Store'

class SumCounter extends Component{
    constructor(props){
        super(props)

        this.onChange = this.onChange.bind(this)
        this.getOwnState = this.getOwnState.bind(this)
        store.subscribe(this.onChange)
        this.state = this.getOwnState()

    }

    onChange(){
        this.setState(this.getOwnState())
    }

    componentWillUnmount(){
        store.unsubscribe(this.onChange)
    }
    getOwnState(){
        const state = store.getState()
        let sum = 0
        for(const key in state){
            if(state.hasOwnProperty(key)){
                sum += state[key]
            }
        }
        return {sum}
    }
    render(){
        return(
            <div>Total: {this.state.sum}</div>
        )
    }
}

export default SumCounter

3.2.3 容器组件和傻瓜组件

在Redux框架下，一个React组件需要完成两个功能：

　　1.和Redux Store打交道，读取Store状态，用于初始化组件的状态，同时还要监听Store的状态改变；当Store发生改变时，需要更新组件状态，驱动组件重新渲染；当需要更新

　　Store状态时，就要派发action对象；

　　2.根据当前props和state，渲染出用户界面。

　　为了让一个组件只专注做一件事，可以把这个组件拆分成多个组件，让每个组件只专注做一件事。

　　上面也说了在Redux框架下，一个React组件南非要完成两个功能，可以考虑拆分成两个组件，把两个组件嵌套起来，完成原本一个组件完成的所有任务。

　　两个组件是父子关系。承担第一个任务的组件，也就是负责和Redux Store打交道的组件，处于外层，所以被称为容器组件(Container Component)，又叫聪明组件；对于承担第二个任务的组件，也就是只专心负责渲染页面的组件，处于内层，叫做展示组件，又叫傻瓜组件。

　　傻瓜组件就是一个纯函数，根据props产生的结果。

Counter.js拆分

import React, {Component} from 'react'
import * as Actions from '../Action'
import store from '../Store'
const buttonStyle = {
    margin: '10px'
}
/*
 * 傻瓜组件
 * Counter组件完全没有state，只有一个render方法，所有的数据都来自props，这种组件叫“无状态”组件
 */
// class Counter extends Component{
//     render(){
//         const {caption, add, math, value} = this.props
//         return(
//             <div>
//                 <button style={buttonStyle} onClick={add}>+</button>
//                 <button style={buttonStyle} onClick={math}>-</button>
//                 <span>{caption} count:{value}</span>
//             </div>
//         )
//     }
// }

//缩减版傻瓜组件，无状态组件，因为没有状态，不需要对象表示，所以连类都不需要了，对于只有一个render方法的组件，缩略为一个函数足矣。
function Counter({ caption, add, math, value }){
    //解构赋值或者props参数
    // function Counter(props) {
    // const { caption, add, math, value } = props
    return (
        <div>
            <button style={buttonStyle} onClick={add}>+</button>
            <button style={buttonStyle} onClick={math}>-</button>
            <span>{caption} count:{value}</span>
        </div>
    )
}

//容器组件
/**
 * CounterContainer承担了所有的和Store关联的工作，它的render函数所做的就是渲染傻瓜组件Counter而已，只负责传递必要的prop
 */
class CounterContainer extends Component{
    constructor(props){
        super(props)
        // console.log('enter constructor',props.caption)

        this.add = this.add.bind(this)
        this.math = this.math.bind(this)
        this.getOwnState = this.getOwnState.bind(this)
        this.onChange = this.onChange.bind(this)
        this.state = this.getOwnState()
    }

    getOwnState(){
        // console.log(store.getState(),'state')
        return {
            value: store.getState()[this.props.caption]
        }
    }

    componentDidMount(){
        //通过Store的subscribe监听其变化，只要Store的状态发生变化就会调用这个组件的onChange方法。
        //增加监听的函数也可以写到构造函数中
        store.subscribe(this.onChange)
    }
    componentWillUnmount(){
        //把监听注销
        store.unsubscribe(this.onChange)
    }
    onChange(){
        this.setState(this.getOwnState())
    }

    add(){
        //派发action
        //action构造函数只负责创建对象，要派发action就需要调用store.dispatch函数
        store.dispatch(Actions.increment(this.props.caption))
        // Actions.increment(this.props.caption)
    }

    math() {
        store.dispatch(Actions.decrement(this.props.caption))
        // Actions.decrement(this.props.caption)
    }

    render(){
        const value = this.state.value
        const {caption} = this.props
        return(
            <Counter caption={caption} add={this.add} math={this.math} value={value} />
        )
    }
}

//export导出的是容器组件，对于这个视图模块来说，根本不会感受到傻瓜组件的存在，从外部看到的就只是容器组件。
export default CounterContainer

3.2.4 组件Context

不能每一个组件用到Store都去引入一次，需要定义一个全局的，只有一个地方需要导入Store，这个位置应该在调用最顶层的React的位置。

Context就是“上下文环境”，让一个树状组件上的所有组件都能访问一个共同的对象。

首先上级要宣称自己支持context，并且提供一个函数来返回代表Context的对象。

然后，这个上级组件下的所有子孙组件，只需要宣称自己需要这个context，就可以通过this.context访问到这个共同的环境对象。

定义一个Provider.js组件

import {Component} from 'react'
import PropTypes from 'prop-types'

/**
 * Provider也是一个React组件，它的render函数就是简单的把子组件渲染出来，在渲染上，Provider不做作何附加的事情。
 */
class Provider extends Component{
    //这个函数返回的就是代表Context的对象
    //要求Provider的使用者通过prop传递进来store
    getChildContext(){
        return {
            store: this.props.store
        }
    }
    render(){
        /**
         * 每个React组件的props中都可以有一个特殊属性children，代表的是子组件
         * this.props.children就是两个Provider标签之间的<ControlPanel />
         * <Provider>
         *  <ControlPanel />
         * </Provider>
         */
        //把渲染工作交给子组件
        return this.props.children
    }
}
//为了让Provider能够被React认可为一个Context的提供者，还需要指定Provider的childContextTypes属性
//类的childContextTypes，必须和getChildContext对应，只有两者都齐备，Provider的子组件才有可能访问到context.
Provider.childContextTypes = {
    store: PropTypes.object
}

export default Provider

入口文件index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Provider from './redux_width_context/Provider'
import store from './redux_width_context/Store'

import ControlPanel from './redux_width_context/views/ControlPanel'

ReactDOM.render(
    <Provider store={store}>
        <ControlPanel />
    </Provider>
, document.getElementById('root'))

ControlPanel.js

import React, {Component} from 'react'
import Counter from './Counter'
import SumCounter from './SumCounter'

class ControlPanel extends Component{
    render(){
        return(
            <div>
                <Counter caption='First' />
                <Counter caption='Second' />
                <Counter caption='Third' />
                <SumCounter />
            </div>
        )
    }
}

export default ControlPanel

　Counter.js

import React, {Component} from 'react'
import * as Actions from '../Action'
// import store from '../Store'
import PropTypes from 'prop-types'

const buttonStyle={
    margin: '10px'
}
function Counter(props){
    const {cpation, add, math, value} = props
    return (
        <div>
            <button style={buttonStyle} onClick={add}>+</button>
            <button style={buttonStyle} onClick={math}>-</button>
            <span>{cpation} Count: {value}</span>
        </div>
    )
}

class CounterContainer extends Component{
    //因为定义了自己的构造函数，所以要用上第二个参数context
    constructor(props, context){
        console.log(context, context)
        //super的时候要带上context，这样才能上React组件初始化实例中的context，不然组件的其它部分就无法使用this.context
        //也可以用...arguments的方法
        super(props,context)
        this.getOwnState = this.getOwnState.bind(this)
        this.add = this.add.bind(this)
        this.math = this.math.bind(this)
        this.onChange = this.onChange.bind(this)
        this.context.store.subscribe(this.onChange)
        this.state=this.getOwnState()
    }

    getOwnState(){
        return {
            // value: store.getState()[this.props.caption]
            //所有的store访问者是通过this.context.store完成，this.context就是Provider提供的context对象
            value: this.context.store.getState()[this.props.caption]
        }
    }

    componentWillUnmount(){
        this.context.store.unsubscribe(this.onChange)
    }

    onChange(){
        this.setState(this.getOwnState())
    }

    add(){
        this.context.store.dispatch(Actions.increment(this.props.caption))
    }

    math(){
        this.context.store.dispatch(Actions.decrement(this.props.caption))
    }

    render(){
        const value = this.state.value
        return(

            <Counter caption={this.props} add={this.add} math={this.math} value={value} />

        )
    }
}
/**
 * 给CounterContainer类的contextTypes赋值和Provider.childContextTypes一样的值，两者必须一致，不然无法访问到context
 */
CounterContainer.contextTypes = {
    store: PropTypes.object
}
export default CounterContainer

3.2.5 React-Redux

　　React应用改进的两个方法，

　　第一是把一个组件拆分为容器组件和傻瓜组件，第二是使用React的Context来提供一个所有组件都可以直接访问的Context。

　　React-Redux就是把这两种方法的套路部分抽取出来复用，这样每个组件的开发只需关注不同的部分就可以了。

React-Redux和Redux的不同就是react-redux不再使用自己实现的Provider，而是从react-redux库导入Provider，

react-redux的两个最主要功能：

　　connect：连接容器组件和傻瓜组件

　　Provider：提供包含store的context。

1、connect函数具体做的工作：

　　把Store上的状态转化为内层傻瓜组件的prop；

　　把内层傻瓜组件中的用户动作转化为派送给Store的动作。

　　一个是内层傻瓜对象的输入，一个是内层傻瓜对象的输出。

Counter.js

import React, {Component} from 'react'
import * as Actions from '../Action'
// import store from '../Store'
import PropTypes from 'prop-types'
import { connect } from 'react-redux';

const buttonStyle={
    margin: '10px'
}
function Counter(props){
    const {cpation, onIncrement, onDecrement, value} = props
    return (
        <div>
            <button style={buttonStyle} onClick={onIncrement}>+</button>
            <button style={buttonStyle} onClick={onDecrement}>-</button>
            <span>{cpation} Count: {value}</span>
        </div>
    )
}

/**
 * 把Store上的状态转化为内层组件的Props
 * @param {*} state
 * @param {*} ownProps
 */
function mapStateToProps(state, ownProps){
    return {
        value: state[ownProps.caption]
    }
}

/**
 * 把内层傻瓜组件中用户动作转化为派送给Store的动作，也就是把内层傻瓜组件暴露出来的函数类型的prop关联上dispatch函数的调用，
 * 每个prop代表的回调函数的主要区别就是dispatch函数的参数不同。
 * @param {*} dispatch
 * @param {*} ownProps
 */
function mapDispatchToProps(dispatch, ownProps){
    return {
        onIncrement: () => {
            dispatch(Actions.increment(ownProps.caption))
        },
        onDecrement: () => {
            dispatch(Actions.decrement(ownProps.caption))
        }
    }
}

/**
 * 给CounterContainer类的contextTypes赋值和Provider.childContextTypes一样的值，两者必须一致，不然无法访问到context
 */
CounterContainer.contextTypes = {
    store: PropTypes.object
}
/**
 * connect是react-redux提供的一个方法
 * 接收两个参数，执行结果依然是一个函数，
 * 这里有两个函数执行：
 * 第一次是connect函数的执行；
 * 第二次把Connect函数执行的结果再执行，这一次的参数是Counter傻瓜组件，最后产生的就是容器组件。
 */
export default connect(mapStateToProps, mapDispatchToProps)(Counter)

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import Provider from './redux_width_context/Provider'
import {Provider} from 'react-redux'
import store from './redux_width_context/Store'
import ControlPanel from './react_redux/views/ControlPanel'

ReactDOM.render(
    <Provider store={store}>
        <ControlPanel />
    </Provider>
, document.getElementById('root'))

　　

2、Provider

react-redux要求store不光是一个object，而且必须是包含三个函数的object，这三个函数分别是：

subscribe、dispatch、getState

　　react-redux定义了Provider的componentWillReceiveProps函数，在React组件的生命周期中，componentWillReceiveProps函数在每次重新渲染时都会调用到，react-redux在componentWillReceiveProps函数中会检查这一次渲染时代表store的prop和上一次的是否一样。如果不一样，就会给出警告，必免多次渲染了不同的Redux Store。

　　每个Redux应用都只能有一个Redux Store，在整个Redux的生命周期中都应保持Store的唯一性。