React中的reudx大规模状态管理

来源：互联网发布：骂人软件编辑：程序博客网时间：2024/06/08 19:22

直接上个栗子：

<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>

阅读全文

0 0