react函数式组件怎么使用dva的model

在React中使用dva的model，首先需要了解dva是一个基于Redux和Redux-Saga的轻量级框架，它封装了Redux和Redux-Saga的复杂性，提供了一种更简洁的方式来组织应用的状态管理。在函数式组件中，通常会用到`useSelector`和`useDispatch`这两个Hooks来接入dva的model。

以下是基本步骤：

1. 安装dva及其依赖项：

npm install dva-core

或者使用yarn：

yarn add dva-core

2. 使用`useDispatch` Hook来获取dispatch函数，然后调用model里面定义的namespace对应的reducers或saga：

import React from 'react';
import { useDispatch } from 'react-redux'; // 如果使用react-redux版本dva
import { useModel } from 'dva-core'; // 如果直接使用dva-core

function MyComponent() {
  const dispatch = useDispatch();
  // 或者使用 dva 的方式获取dispatch
  // const { dispatch } = useModel('app');

  // 假设有一个model定义了namespace为'counter'，里面有reducer和saga
  const counterModel = useModel(state => state.counter);

  // 使用dispatch调用action
  const increase = () => {
    dispatch({
      type: 'counter/increase',
    });
  };

  // 使用model中的state数据
  return (
    <div>
      <p>{counterModel.count}</p>
      <button onClick={increase}>Increase</button>
    </div>
  );
}

export default MyComponent;

在这个例子中，我们通过`useDispatch` Hook来获取Redux的dispatch函数，然后通过发送一个action来更新状态。而`useModel` Hook可以获取到model中定义的state状态。

3. 在dva的model中定义namespace，reducer和saga：

// model定义
app.model({
  namespace: 'counter',
  state: {
    count: 0,
  },
  reducers: {
    increase(state) {
      return { ...state, count: state.count + 1 };
    },
  },
  effects: {
    *decrease(action, { put }) {
      yield put({ type: 'increase' });
    },
  },
});

确保你的dva实例被正确创建并且在应用中被使用。通常，这是通过将你的根组件包裹在`<Provider>`标签内完成的。

import { Provider } from 'react-redux'; // 如果使用react-redux版本dva
import { Router, Route } from 'dva/router'; // 如果直接使用dva-core
import React from 'react';
import ReactDOM from 'react-dom';
import dvaApp from './dva';

const { app, router } = dvaApp;

ReactDOM.render(
  <Provider store={app._store}>
    {router}
  </Provider>,
  document.getElementById('root')
);

请注意，如果你使用的是`dva-core`，那么你需要使用dva-core提供的`Router`和`Route`组件。