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,width: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日志如下