使用dva配置自增计数器
时间: 2023-07-20 08:10:31 浏览: 56
好的,下面是使用dva配置自增计数器的步骤:
1. 首先,在src/models目录下创建一个名为counter.js的文件。
2. 在counter.js中导入dva和antd库,并定义一个名为counter的模型对象。
```
import { message } from 'antd';
import { delay } from 'roadhog-api-doc';
import { addCount } from '@/services/api';
export default {
namespace: 'counter',
state: {
count: 0,
},
reducers: {
add(state) {
return { ...state, count: state.count + 1 };
},
},
effects: {
*addAsync(_, { call, put }) {
yield call(delay, 1000);
const response = yield call(addCount);
if (response.success) {
yield put({ type: 'add' });
} else {
message.error(response.msg);
}
},
},
};
```
3. 在src/services目录下创建一个名为api.js的文件,并在其中定义一个名为addCount的函数用于模拟数据请求。
```
import { delay } from 'roadhog-api-doc';
export async function addCount() {
await delay(1000);
return { success: true };
}
```
4. 在src/routes目录下创建一个名为Counter.js的文件,并在其中定义一个名为Counter的组件。
```
import React from 'react';
import { connect } from 'dva';
import { Button } from 'antd';
const Counter = ({ dispatch, count }) => {
const handleClick = () => {
dispatch({ type: 'counter/addAsync' });
};
return (
<div>
<h1>当前计数:{count}</h1>
<Button type="primary" onClick={handleClick}>
自增
</Button>
</div>
);
};
export default connect(({ counter }) => ({ count: counter.count }))(Counter);
```
5. 最后,在src/index.js中导入dva并注册counter模型对象。
```
import dva from 'dva';
import counter from './models/counter';
import Router from './router';
const app = dva();
app.model(counter);
app.router(Router);
app.start('#root');
```
这样就完成了使用dva配置自增计数器的过程,你可以在Counter组件中点击按钮进行自增操作,同时在控制台中查看redux状态的变化。