React-redux数据交互实例

没有使用redux之前，获取视图数据
1 定义state

   constructor(props){
        super(props);
        this.state ={
            mobile:"",
            password:""
        }
    }

2 在对应的input框绑定state改变的监听事件，将input中的数据通过this更新到state上，当需要提交表单数据时直接引用state数据即可

 <div className={registeredPage.body+" "+universal.columnSpaceAround}>
                            <div className={registeredPage.MenuStyle+" "+universal.rowSpaceAround}>
                           <div className={registeredPage.SpanStyle1+" "+universal.rowCenter
                           +" "+registeredPage.fontStyle2 }>用户名</div>
                            <input className={registeredPage.InputStyle1 } maxLength={11}
                                   onChange={this.phoneChange.bind(this)}/>
                            </div>
                            <div className={registeredPage.MenuStyle+" "+universal.rowSpaceAround}>
                                <div className={registeredPage.SpanStyle1+" "+universal.rowCenter
                                +" "+registeredPage.fontStyle2}>密码</div>
                                <input className={registeredPage.InputStyle1}
                                       onChange={this.passChange.bind(this)}/>
                            </div>

   phoneChange(event){
        this.setState({mobile:event.target.value})
    }
    passChange(event){
        this.setState({password:event.target.value})
    }

 login(){
        $.ajax({
            type: "GET",
            url: "http:///login/userInfo",
            async:false,
            data: {
                "useName":this.state.mobile,
                "passWord":this.state.password
            },
            dataType: "json",
            success: function(data){
                if(data.code=="200"){
                 console.log("登录成功")
                }
            }
        });
    }

使用redux
1
用Provider 标签把所有组件包起来

    <Provider store={store}>

2
创建reducer

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'LOGINUSER':
            return {
                userName:action.userName,

            }
        case 'LOGINPASS':
            return {
                passWord:action.passWord,
            }

        default:
            return initialState;
    }
}

3创建store

let store = createStore(reducer);

这样store仓库就可以用了，现在是子组件怎样从store拿数据和送数据
拿数据

const  mapStateToProps = (state) => {
    console.log(state)
    return {
        store: state
    }
}

通过connet构造后mapStateToProps中的state即是store中的数据
送数据

本来我们要改变store中的数据是通过store.dispatch（action ）到reducer里，然后由reducer修改现在react-redux提供了
mapDispatchToProps可以接收 dispatch() 方法并返回期望注入到展示组件的 props 中的回调方法。这样就可以将视图组件与store进行数据交互了

function mapDispatchToProps(dispatch){
    return{
        userChange:(userName)=>dispatch({ type: 'LOGINUSER', userName:userName }),
        passChange:(passWord)=>dispatch({ type: 'LOGINPASS', passWord:passWord })
        }
}

userChange，passChange就是需要注入到展示组件中的期望
注入到组件

    phoneChange(event){
        this.setState({mobile:event.target.value})
        this.props.userChange(event.target.value);
    }
    passChange(event){
        this.setState({password:event.target.value})
        this.props.passChange(event.target.value);
    }
    render(){
        const {userChange,passChange} = this.props;

这样视图组件的的onchange将会把视图中的数据期望中通过mapDispatchToProps的dispatch分发到store中

当然最后用connect将子组件连接到store中

const LoginPage= connect(mapStateToProps,mapDispatchToProps)(LoginPages);

export default LoginPage

这样就可以将视图中的数据分发到store了

React-redux数据交互实例

猜你喜欢