React中的reudx大规模状态管理

直接上个栗子：

<script>
    //1.定义规则 状态修改的规则提取出来 reducer
    const Reducer = (state=1,action)=>{
        switch (action.type){
            case "ADD":
                return state+1
                break;
            default:
                return state;
        }
    }
    //2.根据规则生成store
    const store = Redux.createStore(Reducer)
    //3.创建conatiner 创建木偶组件 state没有 props
    class Counter extends React.Component{
        constructor(){
            super();
        }
        render(){
            var {num,onAdd} = this.props;
            return <div>
                <h1>{num}</h1>
                <input type="button" value="+" onClick={onAdd} />
            </div>
        }
    }
    //把容器上的state传给num props
    const mapStateToProps = (state=1)=>{
        return {
            num:state
        }
    }
    //把容器中的方法map props
    const mapDispatchToProps = (dispatch)=>{
        return {
            onAdd:()=> dispatch({type:"ADD"})
        }
    }
    //根据木偶组件，来创建container ReactRedux
    const CounterConainer = ReactRedux.connect(mapStateToProps,mapDispatchToProps)(Counter)
    ReactDOM.render(
            <ReactRedux.Provider store={store}>
                <CounterConainer />
            </ReactRedux.Provider>
        ,document.querySelector("#app"))
</script>