• store redux在项目中的应用


    第一步

    在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行为,就可以了

    到这就可以完好的跳转到登录页面了。

  • 相关阅读:
    使用 JavaScript Promise 读取 Github 某用户的数据
    C语言程序设计教程(第三版)李凤霞 第九章课后习题答案
    【精品资源】Java毕业设计攻略:从选题到答辩,一站式指南
    JavaWeb-解析Servlet的适配器模式和Servlet配置
    注意!11月PMP考试时间已定!
    Jenkins CLI二次开发工具类
    SpringBoot整合Swagger
    WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展...
    Abstract Factory 抽象工厂模式简介与 C# 示例【创建型】
    9、JAVA入门——循环结构
  • 原文地址:https://blog.csdn.net/m0_61464384/article/details/126000758