DvaJS 探索之旅：从 dva + umi 官网示例启航

2024-02-25 11:15:21

踏上 DvaJS 学习之旅，让我们从官方网站提供的示例入手，逐一探究其奥秘。

第一步：架设脚手架

首先，安装 dva-cli@next，版本号需为 1.0.0-beta.2 或以上。然后，创建应用：

npx create-dva-app my-dva-app

第二步：配置代理

确保能通过 RESTFul 方式访问 http://localhost:8000/api/users，这需要配置代理。

开启浏览器

完成上述步骤，浏览器将自动开启。

探索示例

接下来，我们来细细剖析官方示例。

src/models/count.js

这个模块定义了一个名为 count 的模型，它管理着全局状态：

import { createModel } from 'dva';

export default createModel({
  namespace: 'count',
  state: 0,
  reducers: {
    add(state) {
      return state + 1;
    },
    minus(state) {
      return state - 1;
    },
  },
});

src/pages/CountPage/index.js

这个页面组件使用 connect 将模型连接到组件，从而在组件中访问和修改模型状态：

import { connect } from 'dva';
import styles from './index.less';

const CountPage = ({ count, add, minus }) => {
  return (
    <div className={styles.countPage}>
      <h1>Count: {count}</h1>
      <button onClick={add}>+</button>
      <button onClick={minus}>-</button>
    </div>
  );
};

export default connect(({ count }) => ({
  count,
}), {
  add,
  minus,
})(CountPage);

src/App.js

这是应用的入口组件，负责加载子路由：

import React from 'react';
import { Router, Route } from 'dva/router';
import CountPage from './pages/CountPage';

const App = () => {
  return (
    <Router>
      <Route path="/" component={CountPage} />
    </Router>
  );
};

export default App;