DVA框架

最新推荐文章于 2025-09-15 08:46:46 发布

原创最新推荐文章于 2025-09-15 08:46:46 发布 · 1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #react native #DVA

DVA框架详解

⭐ DVA核心概念

DVA(Data-View-Action)是一个基于React、Redux和Redux-saga的轻量级前端框架，由蚂蚁金服团队开发，主要用于简化React应用中的数据流管理。

// DVA基本使用示例
import dva from 'dva';

// 创建应用
const app = dva();

// 定义Model
app.model({
  namespace: 'count',
  state: { value: 0 },
  reducers: {
    add(state) {
      return { ...state, value: state.value + 1 };
    },
  },
  effects: {
    *addAfter1Second(action, { call, put }) {
      yield call(delay, 1000);
      yield put({ type: 'add' });
    },
  },
  subscriptions: {
    setup({ dispatch, history }) {
      history.listen(({ pathname }) => {
        if (pathname === '/count') {
          dispatch({ type: 'add' });
        }
      });
    },
  },
});

// 注册路由
app.router(require('./router').default);

// 启动应用
app.start('#root');

🌟 DVA的Model机制

Model核心概念解析

namespace: 全局state上的key，模型的唯一标识
state: 该Model的初始值，可以是任意数据结构
reducers: 用于处理同步操作，是唯一能修改state的地方
effects: 用于处理异步操作和业务逻辑，基于redux-saga
subscriptions: 用于订阅外部数据源，如路由变化、键盘输入等

📊 DVA数据流向

💡 DVA与Redux/Redux-saga的关系

DVA是对Redux、Redux-saga等库的进一步封装和整合，简化了配置和使用流程。

方面	Redux/Redux-saga	DVA
配置复杂度	需要分别配置store、reducer、中间件等	一站式配置，只需创建app并定义model
代码组织	需要自行设计目录结构	约定式的model组织方式
异步处理	需要手动整合redux-saga	内置effects，无需额外配置
样板代码	较多	大幅简化
学习曲线	陡峭	相对平缓

🎮 实际使用案例

完整Model示例

app.model({
  namespace: 'products',
  
  state: {
    list: [],
    loading: false,
    error: null,
  },
  
  reducers: {
    // 处理同步操作
    saveList(state, { payload }) {
      return { ...state, list: payload, loading: false };
    },
    setLoading(state, { payload }) {
      return { ...state, loading: payload };
    },
    setError(state, { payload }) {
      return { ...state, error: payload, loading: false };
    },
  },
  
  effects: {
    // 处理异步操作
    *fetchProducts({ payload }, { call, put }) {
      yield put({ type: 'setLoading', payload: true });
      try {
        const response = yield call(api.getProducts, payload);
        yield put({ type: 'saveList', payload: response.data });
      } catch (error) {
        yield put({ type: 'setError', payload: error.message });
      }
    },
    *createProduct({ payload }, { call, put }) {
      try {
        yield call(api.createProduct, payload);
        yield put({ type: 'fetchProducts' });
      } catch (error) {
        yield put({ type: 'setError', payload: error.message });
      }
    },
  },
  
  subscriptions: {
    setup({ dispatch, history }) {
      // 监听路由变化
      return history.listen(({ pathname }) => {
        if (pathname === '/products') {
          dispatch({ type: 'fetchProducts' });
        }
      });
    },
  },
});

组件中使用DVA

import { connect } from 'dva';

// React组件
function ProductList({ products, loading, dispatch }) {
  return (
    <div>
      <h2>产品列表</h2>
      {loading ? <p>加载中...</p> : null}
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
      <button onClick={() => dispatch({ type: 'products/fetchProducts' })}>
        刷新
      </button>
    </div>
  );
}

// 连接DVA
export default connect(({ products }) => ({
  products: products.list,
  loading: products.loading,
}))(ProductList);