reactjs - 使用 React Hooks 是否会大大减少代码在 React/Redux 中的重用？

Question

假设我们有React/Redux的老传统方式:(如果你熟悉的话就不需要扩展代码了:)

import React from 'react';
import { connect } from 'react-redux';

function Count(props) {
  return (
    <div>
      <button onClick={props.increment}> + </button>
      {props.count}
      <button onClick={props.decrement}> - </button>
    </div>
  );
}

const mapStateToProps = state => ({
  count: state.count
});

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch({ type: 'INCREMENT' }),
  decrement: () => dispatch({ type: 'DECREMENT' })
});

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

现在，使用 React Hooks useSelector() 和 useDispatch()，上面的代码可以写成这样:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function Count() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  const increment = () => dispatch({ type: 'INCREMENT' });
  const decrement = () => dispatch({ type: 'DECREMENT' });

  return (
    <div>
      <button onClick={increment}> + </button>
      {count}
      <button onClick={decrement}> - </button>
    </div>
  );
}

export default Count;

两个版本的工作原理完全相同，只是版本 1 对于 Count 不是高度可重用的吗？这是因为使用不同的 mapStateToProps() 和 mapDispatchToProps()，我们可以再次使用 connect() 创建另一个 CountNoodle() 现在我们重用了 Count()。

对于版本 2，Count() 与它使用的状态和调度是硬连接的，因此整个 Count() 完全不可重用。也就是说，它必须与特定状态和特定调度一起使用，但不能与其他任何东西一起使用。难道不是吗？那么，上面的版本 2 是否不推荐，实际上您可以使用版本 3，即不将其称为 Count()，而是将其称为 CountNoodle() 并“连接”状态和调度，并重新使用 Count()，这只是“演示”？

所以它可能看起来像这样:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

// Count() actually would be in a different file and CountNoodle.js
//   would import that file
function Count({count, increment, decrement}) {
  return (
    <div>
      <button onClick={increment}> + </button>
      {count}
      <button onClick={decrement}> - </button>
    </div>
  );
}

function CountNoodle() {
  const count = useSelector(state => state.countNoodle);
  const dispatch = useDispatch();

  const increment = () => dispatch({ type: 'INCREMENT_NOODLE' });
  const decrement = () => dispatch({ type: 'DECREMENT_NOODLE' });

  return <Count ...{count, increment, decrement} />;
  // or   return Count({count, increment, decrement});
}

export default CountNoodle;

Answer 1

我在帖子 Thoughts on React Hooks, Redux, and Separation of Concerns 中解决了这个问题和我的ReactBoston 2019 talk on "Hooks, HOCs, and Tradeoffs" .

我鼓励您阅读/观看这两篇文章，但作为总结:

• React hook 通常会引导您采用与 HOC 不同的组织模式，其中组件更负责在内部处理自己的数据获取需求
• 在可重用性和可测试性方面，这确实会导致与 HOC 提供的一系列不同的权衡