React状态管理——Dva
目录
一、安装依赖
二、Dva注册model方式
2.1 自动注册models
2.2 手动注册model方式
三、创建 dva 实例
四、创建 model
五、在组件中使用
六、动态加载Dva Model
Dva 是一个基于 redux 和 redux-saga 的轻量级前端框架，可以方便地在 React 应用中管理状态。下面是将 Dva 接入 create-react-app 项目的步骤：
一、安装依赖
在react-react-app项目目录中安装 dva 相关依赖：
npm install dva --save
# 或者使用 yarn
yarn add dva二、Dva注册model方式
2.1 自动注册models
Dva 本身不会自动识别特定的 models 文件夹或 model.js 文件，但官方推荐以下约定俗成的结构：
src/├── models/ # 全局 model 目录│ ├── user.js # 用户 model│ └── product.js # 产品 model└── pages/├── Home/│ ├── model.js # 页面级 model (可选)│ └── index.js└── About/├── model.js└── index.js2.2 手动注册model方式
Dva 需要显式注册 model 才会生效，主要有以下几种注册方式：
- 初始化时注册
// src/index.js
app.model(require('./models/user').default);- 动态注册
// 在组件或路由加载时
useEffect(() => {app.model(require('./models/product').default);
}, []);三、创建 dva 实例
修改 src/index.js 文件：
import React from 'react';
import dva from 'dva';
import createHistory from 'history/createBrowserHistory';
import App from './App';
import './index.css';// 1. Initialize
const app = dva({history: createHistory(),
});// 2. Plugins (可选)
// app.use({});// 3. Model (可以在这里注册全局model)
// app.model(require('./models/example').default);// 4. Router
app.router(() => <App />);// 5. Start
app.start('#root');四、创建 model
在 src/models 目录下创建一个 model 文件，例如 counter.js：
// 标准的 model 文件示例 (models/counter.js)
//export default {
// namespace: 'user', // 必须的唯一标识
// state: {}, // 必须的初始状态
// reducers: {}, // 同步修改 state 的方法
// effects: {}, // 异步处理逻辑
// subscriptions: {} // 订阅数据源
//};export default {namespace: 'counter',state: {count: 0,},reducers: {add(state) {return { ...state, count: state.count + 1 };},minus(state) {return { ...state, count: state.count - 1 };},},effects: {*addAsync(_, { call, put }) {yield call(delay, 1000);yield put({ type: 'add' });},},
};function delay(timeout) {return new Promise(resolve => {setTimeout(resolve, timeout);});
}五、在组件中使用
方法一：connect
import React from 'react';
import { connect } from 'dva';function Counter({ count, dispatch }) {return (<div><h2>Count: {count}</h2><button onClick={() => dispatch({ type: 'counter/add' })}>+</button><button onClick={() => dispatch({ type: 'counter/minus' })}>-</button><button onClick={() => dispatch({ type: 'counter/addAsync' })}>Add Async</button></div>);
}function mapStateToProps(state) {return {count: state.counter.count,};
}export default connect(mapStateToProps)(Counter);方法二：React Hooks（useSelector、useDispatch）
import React from 'react';
import { useSelector, useDispatch } from 'dva';function Counter() {// 使用 useSelector 获取 state 中的 counter 数据const count = useSelector(state => state.counter.count);// 使用 useDispatch 获取 dispatch 方法const dispatch = useDispatch();return (<div><h2>Count: {count}</h2><button onClick={() => dispatch({ type: 'counter/add' })}>+</button><button onClick={() => dispatch({ type: 'counter/minus' })}>-</button><button onClick={() => dispatch({ type: 'counter/addAsync' })}>Add Async</button></div>);
}export default Counter;六、动态加载Dva Model
方法一：使用useEffect + app.model()
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'dva';export default function CounterPage() {const dispatch = useDispatch();const count = useSelector(state => state.counter.count);useEffect(() => {// 动态加载 modelapp.model(require('../models/counter').default);// 组件卸载时取消注册 model（可选）return () => {app.unmodel('counter');};}, [app]);return (<div><h2>Count: {count}</h2><button onClick={() => dispatch({ type: 'counter/add' })}>+</button></div>);
}方法二：使用dynamic
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'dva';export default function CounterPage() {const dispatch = useDispatch();const count = useSelector(state => state.counter.count);useEffect(() => {// 动态加载 modeldispatch({type: '@@dva/dynamicLoad',payload: {models: () => [import('../models/counter')],},});return () => {// 可以在这里取消 model（如果需要）};}, [dispatch]);return (<div><h2>Count: {count}</h2><button onClick={() => dispatch({ type: 'counter/add' })}>+</button></div>);
}