umijs學習（connect、useIntl 、history ）

1、connect

connect就是鏈接UI組件和model的。

import { connect } from 'umi';

export default connect(state => ({//state會返回所有model層命名空間的state
  deviceList:state.deviceList
}))(DeviceManager);

//DeviceManager 為UI組件
const DeviceManager = (props) => {
    const {deviceList}=props
    return(
　    <div></div>　 　　
    )
}

state的值：

  model層代碼

const DistrictModel = {
  namespace: 'deviceList',
  state: {
    accountListParams: {},
    accountList: [],
    currentAccountDeviceList: [],
  },
  effects: {  
  },
  reducers: {
  }
};
export default DistrictModel;

2、useIntl 前端國際化

import { useIntl } from 'umi';

useIntl().formatMessage({ id: 'account.select.placeholder.status' })


//路徑 locales\zh-CN\account.js
export default {
  'account.select.placeholder.status': '狀態',
   //……
}

3、history 用於路徑跳轉與路由信息讀取

// 可用於獲取當前路由信息
import { history } from 'umi';// location 對象，包含 pathname/search/hash
console.log(history.location.pathname)
console.log(history.location.search)
console.log(history.location.hash)

// 可用於路由跳轉// 跳轉到指定路由
history.push('/list')

// 帶參數跳轉到指定路由
history.push('/list?a=b')
history.push({
    pathname: '/list',
    query: {
        a: 'b'
    }
})

// 跳轉到上一個路由
history.goBack();

// 可用於路由監聽
import { history } from 'umi';
const unlisten = history.listen((location, action) => {
    console.log(location.pathname)
})
unlisten()