和taro一起做SPA 4.redux的使用

reduct的使用

让我们通过一个实际的例子学习怎样使用reduct,
首先,我们需要安装redux

yarn add redux

实现reducer,创建store

import React,{Component} from 'react'
import PropTypes from 'prop-types'
import {createStore} from 'redux'
const reducer=(state,action)=>{
    console.log(state.value)
    switch(action.type){
        case "calc":
            return {value:state.value+action.payload}
        default:
            return state;
    }
}
const initState={value:0};
const store=createStore(reducer,initState);

创建store后,我们需要所有的组件都能够访问该store,因此,我们需要把store放到所有组件的父容器上.在这里,我们通过新建一个Provider组件实现store的保存:

class Provider extends Component{
    getChildContext(){
        return {
            store:this.props.store
        }
    }
    render(){
        return this.props.children
    }
}
Provider.childContextTypes={
    store:PropTypes.object
} 

请注意getChildContext方法,为了简化store的传递,React提供了一个Context对象.需要使用Context的父组件只要实现getChildContext方法返回Context对象.并且设置该属性的类型为PropTypes.object即可.
因为Provider作为父组件,内部会嵌套子组件,所以render方法直接返回this.props.children即可.
让我们 看一下如何使用Provide组件:

        <Provider store={store}>
            <ReduxCounter name={"one"} />
            <ReduxCounter name={"two"} />
            <ReduxCounter name={"three"} />
            <Panel/>
        </Provider>     

this.props.children指向的即是Provider组件嵌套的内容.
让我们看一下ReduxCounter组件的实现:

function ReduxCounter(props){
    return (
        <div>
            <span>{props.name}:{props.value}</span>
            <button onClick={props.add}>+</button>
            <button onClick={props.sub}>-</button>
        </div>        
    )
}

ReduxCounter 组件是一个内部无状态组件,只负责渲染

class ReduxCounterContainer extends Component{
    constructor(props,context){
        super(props,context);
        this.state={value:0}
        this.store=this.context.store;
    }
    add(){
        this.setState({value:this.state.value+1})
        this.store.dispatch({
            type:"calc",
            payload:1
        })
    }
    sub(){
        this.setState({value:this.state.value-1})
        this.store.dispatch({
            type:"calc",
            payload:-1
        })
    }
    render(){
        return(
            <ReduxCounter name={this.props.name} value={this.state.value} add={this.add.bind(this)} sub={this.sub.bind(this)}/>
        )
    }
}
ReduxCounterContainer.contextTypes={
    store:PropTypes.object
}

所有的逻辑和状态的处理都由ReduxCounterContainer组件完成.
在这里,需要特别注意的是

ReduxCounterContainer.contextTypes={
    store:PropTypes.object
}

如我们之前所说,所有的子组件,如果希望使用父组件提供的context,必须声明该组件的contextTypes为PropTypes.object

下一步,让我们看一下Panel组件的实现

class Panel extends Component{
    constructor(props,context){
        super(props,context);
        context.store.subscribe(this.change.bind(this));
    }
    change(){
        this.setState(this.context.store.getState());
    }
    render(){
        return (
            <div>{this.context.store.getState().value}</div>
        )
    }
}
Panel.contextTypes={
    store:PropTypes.object
}

Panel组件很简单,只需要通过跟踪store的state变化,展示子state的value值即可.
因此,Panel组件需要接受store的回调

        context.store.subscribe(this.change.bind(this));

最后,让我们看一下ReduxCounterControl组件的实现

function  ReduxCounterControl(){
    return (
        <Provider store={store}>
            <ReduxCounterContainer name={"one"} />
            <ReduxCounterContainer name={"two"} />
            <ReduxCounterContainer name={"three"} />
            <Panel/>
        </Provider>        
    )
}
export default ReduxCounterControl;

至此,我们完成了redux的使用,总结一下,redux使用包括以下几步:

• 创建reducer
• 创建store
• 创建Provider,用来保存和传递store
• 需要跟踪store值的组件,调用store的subscribe方法监控state值的变化
• 各组件通过store.dispatch方法调用reducer处理并返回state
• 组件发现state值发生变化,自动渲染
  下一节我们将学习如何使用react-redux简化这个流程