react中的dva使用

Dva是一个基于Redux、React、Redux-saga等技术的轻量级框架，用于简化React应用的开发。Dva提供了一些约定和API，可以帮助我们更快速地开发React应用。以下是在React中使用dva的简单步骤：

1. 创建一个基于dva的React应用

使用dva-cli工具创建一个新的dva项目：

$ npm install dva-cli -g
$ dva new myApp

2. 引入dva和相关依赖

在src/index.js文件中引入dva和相关依赖：

import dva from 'dva';
import './index.css';

// 1. Initialize
const app = dva();

// 2. Plugins
// app.use({});

// 3. Model
// app.model(require('./models/example').default);

// 4. Router
// app.router(require('./router').default);

// 5. Start
app.start('#root');

3. 编写dva model

在src/models/目录下创建一个新的model文件，例如user.js：

export default {
  namespace: 'user',
  state: {
    list: [],
  },
  reducers: {
    save(state, { payload: { list } }) {
      return { ...state, list };
    },
  },
  effects: {
    *fetch({ payload }, { call, put }) {
      const { data } = yield call(queryUsers);
      yield put({
        type: 'save',
        payload: {
          list: data,
        },
      });
    },
  },
};

这个model定义了一个namespace为'user'的model，包括了state、reducers和effects三个部分。其中reducers用于处理同步操作，effects用于处理异步操作。

4. 注册dva model

在src/index.js文件中注册刚才编写的model：

import dva from 'dva';
import './index.css';
import user from './models/user';

// 1. Initialize
const app = dva();

// 2. Plugins
// app.use({});

// 3. Model
app.model(user);

// 4. Router
// app.router(require('./router').default);

// 5. Start
app.start('#root');

5. 使用dva connect连接组件和model

在需要使用model的组件中，使用dva提供的connect方法连接组件和model：

import { connect } from 'dva';

function Users({ dispatch, users }) {
  function handleClick() {
    dispatch({
      type: 'user/fetch',
    });
  }

  return (
    <div>
      <h1>List of users</h1>
      <button onClick={handleClick}>Fetch users</button>
      <ul>
        {users.list.map((user, index) => (
          <li key={index}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default connect(({ user }) => ({ users: user }))(Users);

这个组件使用了connect方法连接了'user'命名空间下的state和dispatch到组件的props中。

6. 运行应用

使用npm start命令启动应用：

$ cd myApp
$ npm start

以上是在React中使用dva的简单步骤，具体使用可以参照dva官方文档和示例。