定义model:
创建一个model文件来定义程序中的数据模型,在model文件中初始状态、监听器、异步请求等等
引入model:
在入口文件(app.js/index.js)中引入定义的model文件
使用model:
在组件中使用connect方法连接model和组件(connect是二者连接的桥梁),将模型中的状态和action通过使用props属性传递给组件
触发action:
action在组件中可以通过调用props来触发action,从而改变程序中数据的状态
数据更新:
当触发action时,dva会根据reducer和effect中的逻辑来更新数据模型的状态,触发reducer会同时更新状态,然而触发effect可以进行异步操作,在异步操作完成后再触发reducer更新状态
dva的状态管理的工作流程:
1. 创建 model 文件:在 src/models 目录下创建一个 model 文件。该文件定义一个 namespace 和关于model 的状态和操作的定义
// src/models/example.js
export default {
namespace: 'example',
state: {
count: 0,
},
reducers: {
increment(state) {
return { ...state, count: state.count + 1 };
},
},
};
2. 注册 model:在 src/models 目录下 index.js 文件中,将创建的 model 注册到 dva 中。
// src/models/index.js
import example from './example';
export default [example];
3. 连接 dva:在应用入口文件(src/app.jsx)中,用 dva 连接
// src/app.jsx
import { create } from 'dva';
import models from './models';
import App from './App';
const app = create();
models.forEach((model) => app.model(model));
app.router(App);
app.start('#root');
4. 在组件中使用状态:在需要使用状态的组件中,使用 connect 函数从 dva 的 state 中获取状态值,并可以通过 dispatch 方法触发 reducers 中定义的操作
import React from 'react';
import { connect } from 'dva';
function Example({ count, dispatch }) {
const handleIncrement = () => {
dispatch({ type: 'example/increment' });
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleIncrement}>Increment</button>
</div>
);
}
export default connect(({ example }) => ({
count: example.count,
}))(Example);
使用 connect 函数将组件和 dva 建立连接,可以从 dva 的 state 中获取到 example model 的 count 属性,并将其作为组件的 props 进行传递,我们可以通过 dispatch 方法触发example model 中的 increment 操作
首先定义 model 文件,其次注册 model,最后组件和Dva建立连接(用 connect 函数)
实现简洁、方便及高效的状态通信