如何将Redux dispatch绑定到无状态组件？是否需用connect？

嗨，我来帮你解决这个Redux组件绑定的问题～

针对你的无状态函数组件，现在有更优雅的替代方式，完全不用依赖connect：

1. 使用Redux Hooks（官方推荐） #

从Redux v7.1开始，官方推出了useDispatch等Hooks，专门适配函数组件，这也是当前最推荐的做法。它不需要你直接导入store，而是通过React Context自动获取dispatch方法，避免了组件和store的强耦合。

改造后的代码示例：

import React from "react";
import { useDispatch } from 'react-redux'; // 导入useDispatch Hook
import { userActions } from '../_actions';

const LogoutButton = ({ history }) => {
  // 直接获取dispatch方法
  const dispatch = useDispatch();

  const handleLogout = () => {
    dispatch(userActions.logout());
    history.push(`${process.env.PUBLIC_URL}/signin`);
  };

  return (
    <button type="button" className="logout" onClick={handleLogout}>
      Logout
    </button>
  );
};

export default LogoutButton;

2. 通过Redux Context直接获取store（不推荐） #

Redux的Provider本质是基于React Context实现的，你可以手动通过ReactReduxContext获取store，但这种方式属于内部API调用，存在版本变动风险，而且代码复杂度比Hooks高，不建议使用：

import React, { useContext } from "react";
import { ReactReduxContext } from 'react-redux';
import { userActions } from '../_actions';

const LogoutButton = ({ history }) => {
  const { store } = useContext(ReactReduxContext);

  const handleLogout = () => {
    store.dispatch(userActions.logout());
    history.push(`${process.env.PUBLIC_URL}/signin`);
  };

  return (
    <button type="button" className="logout" onClick={handleLogout}>
      Logout
    </button>
  );
};

export default LogoutButton;

答案是现在已经不是了。Redux官方目前更推荐用Hooks（useDispatch/useSelector）替代connect，原因如下：

• 代码更简洁：不需要编写mapStateToProps/mapDispatchToProps，也不用处理高阶组件的嵌套逻辑
• 更贴合React函数式趋势：Hooks是函数组件的标准写法，逻辑复用更灵活
• 避免额外组件层级：connect会给组件套上一层高阶组件，而Hooks不会增加组件树的复杂度

不过如果你的项目还在使用类组件，connect依然是可行的方案，但针对你的无状态函数组件，useDispatch显然是更优的选择。

另外你之前直接导入store的方式确实存在问题：

• 组件和store强耦合，测试时无法轻松替换mock store，也不利于组件复用
• 在服务端渲染场景下，单例store会导致状态共享的Bug

所以换成useDispatch的方式会更稳妥。

内容的提问来源于stack exchange，提问作者Fabrice