第一步
在index中创建store
前端数据迁移到后端 利用react-redux
创建完store 用Provider标签包裹所有组件并且提供store
把其他组件中的state状态都移动到store中去
第二步 增强状态
然后再组件中应用mapState把store中的值映射到Regist身上 jmapState接收一个state参数 用...stste.user获取到值映射到props里面
第三步 增强方法
用mapDispatch派发行为 接收dispatch参数 执行方法 派发dispatch 去触发action
同时再创建一个只和用户相关的user action 导出一个函数 userFiledUpdate 接收参数为key和value
然后把 user action 导到注册组件中用dispatch去接收action里面有一个userFiledUpdate()属性
例如这样:onEmailChange:(key,value)=>dispatch(action.userFiledUpdate(key,value))
然后通过connect把React组件身上添加上这两个属性
export default connect(mapState,mapDispatch) (Regist)
第四步 使用store的值 reducers中的 USER.JS
在方法中通过this.props获取到mapdispatch中触发action的方法{实际上这里的key value就是action}
通过发送带有常量action 如果你的常量是符合我user定义的常量那么在store中user reducer的会 return下去 进行
key动态取值 进行对映射里面的 state覆盖修改(...state,[key]:value) 传啥取啥 邮箱密码用户名
第五步: 注册已经写好了 接下来写把注册的进行提交
提交按钮有一个方法,然后再dispatch中定义这个方法,通过在上方的onsubimt进行触发这个方法,然后同理派发action,触发action然后就行执行 异步网络请求 然后封装一个request
里面写上get post put delete方法
然后再封装一个专用user用户请求的request,例如这样
regist:(user)=>apiClient.post('/users',{user}),
这样当前端访问/users时候,后端也会进行访问后端的路由地址users返回状态值status
如果等于1 状态码 那么就跳转到登录页面。
第七步:增加一个RESULT常量 然后能查询常量不符合时返回错误对象,以及返回错误信息
第八步:页面都具有生面周期 想要实现注册跳转到登录之后注册信息应该被刷新
实现步骤:
1:定义一个生命周期 在离开这个页面之前的这个周期进行操作,执行onUnload()
componentWillUnmount(){
this.props.onUnload()
}
在这侧也买你增强这个方法,然后用dispatch触发action (同时定义一个unload常量好让进入ruderx里面)然后进行重新初始化state行为,就可以了
到这就可以完好的跳转到登录页面了。