dvajs中@connect在hook下使用

阿超

发布于 2024-10-11 09:32:02

20300

代码可运行

文章被收录于专栏：快乐阿超快乐阿超

运行总次数：0

代码可运行

美而无德，有如没有香味的花，徒有其表。——笛福

在Dva.js中，@connect 是 connect 的语法糖，它允许我们更方便地将模型（models）与组件进行映射。在类组件中使用 @connect 是非常直观的，但在函数式组件（hook）中，由于函数组件的渲染逻辑是由函数本身直接定义的，而不是通过继承 React.Component，因此我们不能直接使用 @connect 装饰器。

不过，我们可以通过使用 connect 函数的 Hook 版本来实现类似的功能。在函数式组件中，我们可以使用 useSelector 和 useDispatch 这两个 hooks 来分别获取 state 和 dispatch action。这样，我们就可以在函数式组件中实现与 @connect 相似的效果。

下面是一个如何在函数式组件中使用 connect 的示例：

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

const mapStateToProps = (state) => {
  return {
    home: state.home,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    changeValue: (payload) => dispatch({
      type: 'home/changeValue',
      payload,
    }),
  };
};

const MyComponent = (props) => {
  const { home, changeValue } = props;
  const handleClick = () => {
    changeValue(!home.likes);
  };

  return (
    <div>
      <Button onClick={handleClick}>Toggle Like</Button>
      <span>{home.likes ? 'Liked' : 'Unliked'}</span>
    </div>
  );
};

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

在这个例子中，mapStateToProps 和 mapDispatchToProps 分别定义了如何将 state 和 dispatch 映射到组件的 props 上。然后，我们使用 connect 函数将这些映射应用到 MyComponent 组件上。

如果你想要使用 hooks 的方式，可以这样写：

import React from 'react';
import { useSelector, useDispatch } from 'dva';
import { Button } from 'antd';

const MyFunctionalComponent = () => {
  const home = useSelector((state) => state.home);
  const dispatch = useDispatch();

  const handleClick = () => {
    dispatch({
      type: 'home/changeValue',
      payload: !home.likes,
    });
  };

  return (
    <div>
      <Button onClick={handleClick}>Toggle Like</Button>
      <span>{home.likes ? 'Liked' : 'Unliked'}</span>
    </div>
  );
};

export default MyFunctionalComponent;

在这个函数式组件的例子中，我们使用 useSelector 来获取 state 中的 home 数据，使用 useDispatch 来获取 dispatch 函数，然后在事件处理函数中调用 dispatch 来更新 state。这样就实现了在函数式组件中使用 Dva 的状态管理。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-10-10，如有侵权请联系 cloudcommunity@tencent.com 删除

connect