直接将useSelector作为函数参数传入是否存在问题？

这种写法存在潜在的坑，主要涉及React Hook规则和Redux的运行机制：

• 踩了React Hook的调用规则红线：React明确要求所有Hook必须在组件的顶层直接调用，不能嵌套在普通函数的参数里、条件判断里或者循环里。虽然现在这么写可能暂时没报错，但后续如果调整代码（比如把这段逻辑放到if判断里），就会直接触发Hook违规报错，而且这种写法本身也不符合React的设计规范。

• 容易触发意外的函数调用：useSelector会订阅Redux store的状态变化，每次store里的count更新时，useSelector都会重新执行并返回新值。如果直接把它传给addCount，就意味着每次count变化，addCount都会被自动调用一次——这大概率不是你想要的，毕竟addCount一般是用来主动修改状态的（比如点击按钮时触发），这种写法会导致它被被动触发，引发不必要的状态循环或副作用。

• 调试和可读性拉胯：把useSelector的结果直接塞到函数参数里，数据流会变得很隐蔽。万一count的值不对，你很难快速判断是useSelector拿错了状态，还是addCount的逻辑有问题。先把值存到变量里，代码逻辑一目了然，调试起来也方便很多。

正确的写法还是先把状态存到变量里，再在需要的地方调用函数：

const count = useSelector(getCount);

// 比如在点击事件里触发
const handleClick = () => {
  addCount(count);
};

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