React 组件怎么连接 dva 状态？connect 高阶函数用法解析

React 组件连接 dva 全局状态的核心是通过 connect 高阶函数建立桥梁。dva 的 connect 继承自 react-redux，采用柯里化（Currying）设计，将 dva 数据模型（Model）中由命名空间管理的全局 State 和分发器 dispatch 提取出来，以只读 Props 的形式精确注入到目标 React UI 组件中，从而将普通展示组件转换为能够感知数据变更的容器组件。

一、dva 单向数据流与 connect 的核心定位

在 dva 应用中，数据流严格遵循单向闭环机制：用户在 UI 组件中的交互操作通过 dispatch 派发 Action；包含业务逻辑的 Model 接收到 Action 后，在 Effects 中处理异步网络请求，或者在 Reducers 中纯函数式地计算并更新 Redux Store；最后，被 connect 包装的 React 组件监听到 Store 变化，获取最新属性并触发视图更新。

connect 在这个链路中扮演着“订阅者”和“属性分发者”的双重角色。它内部封装了对 Redux Store 的订阅机制，负责浅比较组件所关心的状态切片是否真正发生了变更，从而避免全局任意状态更新都引发全部视图组件重新渲染的问题。

二、连接 dva 状态的四个标准化操作步骤

在实际工程中，将一个 React 页面或组件连接到 dva 状态树，标准流程分为四个明确的步骤：

步骤 1：定义并注册 dva Model

首先在项目的数据模型目录（如 src/models/user.js）中声明模型对象。必须指定唯一的 namespace，定义初始 state，以及用于同步修改的 reducers 和处理异步逻辑的 effects：

// src/models/user.js
export default {
  namespace: 'user',
  state: {
    list: [],
    total: 0,
    currentUser: null,
  },
  reducers: {
    saveList(state, { payload }) {
      return {
        ...state,
        list: payload.list,
        total: payload.total,
      };
    },
  },
  effects: {
    *fetchList({ payload }, { call, put }) {
      // 模拟调用 API 接口
      const response = yield call(queryUserList, payload);
      yield put({
        type: 'saveList',
        payload: response.data,
      });
    },
  },
};

步骤 2：编写 mapStateToProps 筛选函数

在需要消费数据的 React 组件文件中，编写 mapStateToProps 函数。入参 state 包含了全局所有已注册 Model 的状态切片，通过 state.namespace 定位目标数据并返回一个纯对象：

// 仅提取当前组件真正需要的字段
const mapStateToProps = ({ user, loading }) => {
  return {
    userList: user.list,
    totalCount: user.total,
    // 配合 dva-loading 获取特定异步 action 的加载状态
    isLoading: loading.effects['user/fetchList'],
  };
};

步骤 3：使用 connect 高阶函数执行柯里化包装

调用 dva 导出的 connect 函数完成包装。connect 接收映射函数并返回一个新的高阶组件函数，再次传入目标组件即可完成连接：

import React from 'react';
import { connect } from 'dva';

function UserListPage(props) {
  // 此时组件已挂载来自 dva 的属性
  const { userList, totalCount, isLoading, dispatch } = props;
  // ...
}

// 柯里化执行包装并导出
export default connect(mapStateToProps)(UserListPage);

@connect(mapStateToProps)
class UserListPage extends React.Component {
  // ...
}
export default UserListPage;

步骤 4：在组件内消费 Props 并分发 Action

在包装后的组件中，通过 props 读取数据，并通过自动注入的 props.dispatch 派发带有完整命名空间前缀的 Action（格式为 namespace/actionName）：

import React, { useEffect } from 'react';

function UserListPage({ userList, isLoading, dispatch }) {
  useEffect(() => {
    // 组件挂载时触发异步请求
    dispatch({
      type: 'user/fetchList',
      payload: { page: 1, pageSize: 10 },
    });
  }, [dispatch]);

  if (isLoading) {
    return <div>正在加载用户数据...</div>;
  }

  return (
    <ul>
      {userList.map(item => (
        <li key={item.id}>{item.name} - {item.role}</li>
      ))}
    </ul>
  );
}

三、connect 参数与返回值深度拆解

connect 函数完整的签名定义为：

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

在 90% 以上的日常业务开发中，我们主要使用前两个参数。深入理解这两个参数的运作逻辑，是写出优雅、低冗余代码的前提。

1. mapStateToProps 的入参机制与结构要求

mapStateToProps 接收两个参数：(state, [ownProps])。

• 第一个参数 state：代表当前的 Redux 全局状态树。在 dva 中，各个 model 的 state 会以其 namespace 作为一级属性挂载。例如 state.user、state.project。
• 第二个参数 ownProps（可选）：代表父级组件直接传递给当前被包装组件的原始 Props。当组件需要根据外部传入的 ID（如路由参数、父组件传递的 filter 条件）筛选特定状态项时非常实用：

  const mapStateToProps = (state, ownProps) => {
    const { currentId } = ownProps;
    return {
      currentItem: state.user.list.find(item => item.id === currentId),
    };
  };

2. mapDispatchToProps 的默认机制与显式绑定对比

mapDispatchToProps 用于定义如何将分发逻辑绑定为普通函数注入组件。它在省略与显式传递时具有截然不同的行为：

四、高频问题排查与关键注意事项

在利用 connect 连接 dva 状态时，开发者常因命名空间拼写、引用变动或全量解构导致各种运行异常或性能缺陷。图 4 总结了三大关键维度的排查要点与决策矩阵：

1. 命名空间对应错误：TypeError: Cannot read properties of undefined

这是接入 dva 时最常遇到的初学者报错。主要原因有两点：

1. Model 未注册：在传统 dva 或 Umi 项目中，必须确保 app.model(userModel) 已执行，或文件位于约定目录（如 src/models）被自动扫描。如果模型未加载，全局 state 中就没有 state.user，解构时就会引发空指针报错。
2. 命名空间与文件名混淆：mapStateToProps 中提取的 key 必须与 Model 内部声明的 namespace: 'user' 严格一致，而不是以本地文件名或者 import 变量名为准。

2. 避免在 mapStateToProps 中产生新引用引发无效重渲染

connect 内部会对 mapStateToProps 返回对象的每一个属性进行浅比较（Shallow Equal）。如果新旧属性的引用相同，React 就会阻止无意义的子树重新渲染。

如果在 mapStateToProps 内部每次执行 filter、map、对象合并或空数组兜底，由于新数组/新对象的内存引用永远不同，会导致每次 Store 任意微小变化时，该组件都被强行重新渲染：

// 错误示范：每次调用都返回新数组引用，浅比较永远失效
const mapStateToProps = ({ user }) => ({
  activeList: user.list.filter(item => item.isActive), // × 导致频繁重渲染
});

// 正确方案一：在 model 的 reducers 或 effects 中直接清洗并维护 activeList
// 正确方案二：使用 reselect 库建立具备缓存机制的 memoized selector

3. 善用 dva-loading 插件免除样板代码

传统的状态管理需要在 model 中声明 isFetching: true/false 并在多个 reducer 中手动切换。而在 dva 中，安装 dva-loading 插件后，框架会在全局状态树自动注入 loading 节点。

在 mapStateToProps 中直接提取 loading.effects['namespace/effectName']，即可在异步函数启动时自动获得 true，完成时自动变回 false，极大精简了状态模型的设计复杂度。

五、全文总结

掌握 React 组件与 dva 状态的连接，核心在于理解 connect 高阶函数的柯里化机制与数据流动方向：

• 状态下发：通过 mapStateToProps 仅挑选当前组件真正依赖的数据字段，保持最小粒度依赖。
• 动作触发：借助缺省注入的 props.dispatch，按 namespace/action 规范派发同步或异步逻辑。
• 生命周期闭环：依赖 Redux 的订阅机制与浅比较优化，兼顾页面响应速度与渲染性能。

按照上述标准规范与注意事项编写组件，即可在复杂的 React 业务项目中构建起结构清晰、性能可控的数据流转架构。