最近項(xiàng)目需要用到了umi.js，豐富的內(nèi)置功能對(duì)小白很友好，上手難度不大。今天嘗試在自己寫的demo里加上dva，get一下connect新用法。

view和model的關(guān)系圖

image-20210204152603826.png

model主要有 namespace state reducers effects subscription5個(gè)主要屬性

//model.js 基本結(jié)構(gòu)
export const DemoModel = {
  nameSpace: 'demo', // 定義model名，如果沒(méi)聲明，會(huì)以文件作為namespace
  state:{}, 
  reducers：{ 
    // reducer 是 Action 處理器，用來(lái)處理同步操作，
    getList (state, { payload }) { // 第二個(gè)參數(shù)為 action = {type,payload} 
        //代碼操作
      return payload 
    }
    }，
  effects:{ 
    // Effect是一個(gè) Generator 函數(shù)，內(nèi)部使用 yield 關(guān)鍵字，標(biāo)識(shí)每一步的操作
    *getRemote ({ payload },{put, call}) {  
      // 這里每個(gè)函數(shù)都有兩個(gè)參數(shù)，（action,effect), effect = {put,call,select}
      // put 觸發(fā)一個(gè)action，類似于display
      // call 執(zhí)行異步函數(shù)，比如請(qǐng)求 
      const data = yield call(getRemoteList)
      yield put({
        type: 'getList',
        payload: {"data":data} // 這里直接返回data會(huì)獲取不到數(shù)據(jù)，因此我用對(duì)象又包了一層
      })
    },
    *delUser ({ payload:{ id } },{put,call}) {
      const data = yield call(delUserData, { id })
      yield put({
         type: 'getRemote', 
         payload: {}
       })
    },
  },
  subscriptions:{
    setup({ dispatch, history }) {
      return history.listen(({ pathname }) => { // {pathname} = location
        if (pathname === '/') {
          dispatch({
            type: 'getRemote', // 監(jiān)聽(tīng)到進(jìn)入主頁(yè)，派發(fā)query事件
          })
        }
      });
    }
  }
}

使用 useSelector useDispatch ,來(lái)替代原先的connect，綁定 State 到 View ，

import { useSelector, useDispatch，useStore } from 'umi';

const Index = () => {
  // useSelector 通過(guò)getState()方法找到demo的data
    const state = useSelector(state => state.getState().demo.data) 
  // useStore：如果store中的state改變，這個(gè)將不會(huì)自動(dòng)更新
  //const state = useStore(state.getState())
  const dispatch = useDispatch()
  
  const deleteHandler = async (id) => {
    dispatch({
      type:'users/delUser',  
      payload:{
        id
      }
    })
  };
  
  return()
}
export default Index

原先connect寫法

import { connect } from 'umi';

const Index = (props) => {
  const { users, dispatch } = props
    const state = users.users.data
  const deleteHandler = async (id) => {
    dispatch({
      type:'users/delUser',  
      payload:{
        id
      }
    })
  };
  
  return()
}

const stateToProps = ({users}) => {
   return {
    users
  }
}
export default connect(stateToProps)(Index);
// 或者
export default connect(({users}) => ({
  users
}))(UserTable);