useSelector/useDispatch能否替代mapStateToProps等及相关实践疑问

作为长期使用Redux的开发者，我完全能理解你现在的困惑——从旧的类组件+connect模式切换到新的钩子写法确实需要适应，但可以明确告诉你：useSelector和useDispatch完全可以替代mapStateToProps、mapDispatchToProps和connect的绝大多数场景，而且这也是Redux官方现在最推荐的开发方式。

接下来分点拆解你的问题：

1. mapState等方法是否还有实用性？ #

它们并没有彻底过时，在一些遗留的类组件项目中仍会被用到，但对于新的函数组件开发，钩子方式明显更简洁高效。connect的核心作用是把Redux状态和dispatch方法注入组件props，而useSelector/useDispatch直接在组件内部获取这些内容，省去了connect的模板代码，尤其是在TypeScript下，不用再处理ownProps的类型嵌套，大大简化了类型定义工作。

2. 能否用useSelector/useDispatch替代，解决props drilling问题？ #

当然可以！这正是钩子方案的核心优势之一。你现在遇到的“逐层传递状态+频繁更新类型”的繁琐问题，本质就是props drilling（属性透传），而让每个需要状态的子组件直接用useSelector获取store中的值，用useDispatch触发action，完全不需要通过父组件层层透传props。

举个简单的TypeScript代码对比：

之前用connect的方式 #

// 父组件
interface ParentProps {
  user: User;
  updateUser: (user: User) => void;
}

const Parent = connect(
  (state: RootState) => ({ user: state.user }),
  { updateUser }
)(({ user, updateUser }: ParentProps) => {
  return <Child user={user} updateUser={updateUser} />;
});

// 子组件
interface ChildProps {
  user: User;
  updateUser: (user: User) => void;
}

const Child = ({ user, updateUser }: ChildProps) => {
  return <GrandChild user={user} updateUser={updateUser} />;
};

改用钩子的方式 #

// 父组件
const Parent = () => {
  return <Child />; // 无需传递任何状态相关props
};

// 子组件
const Child = () => {
  return <GrandChild />; // 同样无需透传props
};

// 实际使用状态的GrandChild组件
const GrandChild = () => {
  const user = useSelector((state: RootState) => state.user);
  const dispatch = useDispatch();
  
  const handleUpdate = (newUser: User) => {
    dispatch(updateUser(newUser));
  };
  
  return <div>{user.name}</div>;
};

可以看到，钩子方式完全消除了props传递的负担，TypeScript下也只需要在useSelector里定义RootState的类型，不用维护多层组件的Props接口。

3. 直接在子组件用钩子的弊端？ #

说实话，弊端非常少，但还是有几个需要注意的细节：

• 组件测试的依赖：如果子组件直接用useSelector，测试时必须把组件包裹在Redux Provider中，而用connect的组件是接收props的，可以直接传模拟props进行测试。不过这个问题很好解决，Redux提供了redux-mock-store工具，或者你可以写一个测试专用的Provider包装组件，成本很低。
• 性能优化的注意事项：useSelector默认使用浅比较来判断是否需要重渲染。如果你在useSelector里返回一个新的对象或数组（比如useSelector(state => {name: state.user.name})），每次状态变化都会触发重渲染，因为每次返回的都是新对象。解决方法有两个：
  • 使用shallowEqual作为useSelector的第二个参数：useSelector(state => ({name: state.user.name}), shallowEqual)
  • 用reselect创建记忆化的selector，缓存计算结果，避免不必要的重渲染
• 代码风格一致性：如果你的项目中既有旧的connect代码又有新的钩子代码，可能会出现风格不统一的情况，但这只是过渡阶段的问题，逐步迁移到钩子即可。

总结 #

总的来说，强烈建议你改用useSelector和useDispatch，这不仅能解决你当前的props drilling痛点，还能让代码更简洁，更符合现代React的开发范式。只要注意性能优化和测试的小细节，几乎没有什么明显的弊端。

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