• AntDesign(React)学习-9 Dva model reducer实践


    今天肺炎增长数字依然吓人,感觉穿越到丧失片里了。

    本节开始学习dva model使用,官网的讲解太文档化,对新手实践不太友好,自己简化了一个最简单的演示代码。

    1、在src,models文件夹下创建user.ts,初始化username为张三1

    const UserModel = {
        namespace: 'User',
        state:{
            UserInfo:{
                username:"张三1"
            }
        },
        reducers:{
            updateUserState(state,action)
            {
                let currentUser=state.UserInfo;
                console.log("CurrentUser:"+currentUser);
                console.log(currentUser);
                console.log("CurrentUserPayload:")
                console.log(action.payload.UserInfo);
                state=action.payload;
                return state;
            }
        }
    };
    export default UserModel;

    注意:

    红色部分如果写成

    state.UserInfo.username=action.payload.UserInfo.username;
    不会自动刷新
     
    要写成
    state=action.payload;
     
    或者后两句写为
    return { ...state,UserInfo:action.payload.UserInfo} 
     
    因为必须返回一个新的引用才会更新页面

    2、修改user.tsx如下

    import React from 'react';
    import { Button,Input} from 'antd';
    import {connect} from 'dva';
    
    class User extends React.Component { 
      render() {
        console.log("render:");
        console.log(this.props);
        return (
          <div>用户管理
            <div>姓名:{this.props.UserInfo.username}</div>
            <Button type="primary" style={{marginTop:10,300}} onClick={this.handleClick}>修改</Button>
          </div>
        );
      }
      handleClick = e => {
        const userInfo={
          UserInfo:{
            username:"张三2"
        }
        }
        this.props.dispatch({
          type:"User/updateUserState",
          payload:userInfo
        })
        console.log('click: ', e);
      };
    }
    const getUserInfoFromState=(state)=>{
      console.log(state);
      return {UserInfo:state.User.UserInfo}
    
    }
    export default connect(getUserInfoFromState)(User) ;

    3、运行效果如下

     4、点击修改后

     5、console日志如下

  • 相关阅读:
    java面向对象4-多态
    机器学习降维--SVD奇异值分解
    hive中的null
    熵(二)-交叉熵与相对熵
    指数家族-Beta分布
    指数族函数
    java面向对象3-继承(继承、抽象类、抽象接口)
    网页自动刷新
    spring +hibernate 启动优化【转】
    svn is already locked解决方案
  • 原文地址:https://www.cnblogs.com/zhaogaojian/p/12252799.html
一二三 - 开发者的网上家园