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和相关依赖：
```javascript
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：
```javascript
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：
```javascript
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：
```javascript
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官方文档和示例。
349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
