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