react|React-redux数据交互实例 react|前端常用开发记录

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

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

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

用户名密码

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 标签把所有组件包起来

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拿数据和送数据
拿数据

constmapStateToProps = (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中