useModel

`useModel` 是一个由 umijs 提供的 hooks，用于在 React 函数组件中使用 dva model 中的 state 和 dispatch。dva 是一个基于 Redux、Redux-saga 和 React-router 的轻量级框架，用于简化 React 应用程序的开发。

## 使用

使用 `useModel` hook 的前提是，需要先在 umijs 项目中配置好 dva model。假设我们有一个名为 `example` 的 model，其定义如下：

export default {
  namespace: 'example',
  state: {
    value: 0,
  },
  reducers: {
    setValue(state, { payload }) {
      return { ...state, value: payload };
    },
  },
  effects: {
    *setValueAsync({ payload }, { call, put }) {
      yield call(delay, 1000);
      yield put({ type: 'setValue', payload });
    },
  },
};

然后，在 React 函数组件中使用 `useModel` hook，可以按照以下方式进行：

import { useModel } from 'umi';

function ExampleComponent() {
  const { example, dispatch } = useModel('example');

  const handleClick = () => {
    dispatch({
      type: 'example/setValueAsync',
      payload: 1,
    });
  };

  return (
    <div>
      <p>Value: {example.value}</p>
      <button onClick={handleClick}>Set Value</button>
    </div>
  );
}

在上面的代码中，`useModel` hook 接收一个字符串参数，表示需要使用的 dva model 的名称。返回值是一个对象，包含了该 model 中的 state 和 dispatch 函数。在组件中可以直接使用这些值，例如在上面的例子中，我们使用 `example.value` 来显示 state 中的值，使用 `dispatch` 函数来触发 action。