如果使用React Redux Hooks，如何实现代码重用？

Question

假设我们有一个组件：

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>
  );
}

但是让我们说它实际上是一个复杂的组件，并且[45]内没有3行代码，而是45或80行代码。在那种情况下，如果我们不想将代码映射到另一个Redux状态，而又不想重复代码，该如何实现代码重用？

例如

1. 如果在同一页面上需要两个这样的组件，一个用于return ()，一个用于countIceCream，该怎么办？
2. 如果在“待办订单”页面上，我们需要此类组件，但它适用于countDrink？

Answer 1

我要做的是组成两个组件，第一个 countSpoon或IceCreamCount，第二个是基本的DrinkCount组件，将不会连接到redux

示例：

Count

Answer 2

如果我理解正确，您想产生相同的输出，但要从不同位置获取CountIceCream和CountDrink的状态数据。 CountIceCream和CountDrink的操作也不同。

因此，这是CountIceCream和CountDrink的增量操作的示例：

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


//connected to redux
function IceCreamCount(props){
    return <Count count={props.count} increment={...} decrement={...} />
}

这里是选择器，用于获取饮料和冰淇淋的计数数据（这是一个简单的示例，在项目中，我建议使用

const incrementDrink = ()=>({type;INCREMENT_DRINK})
const incrementIceCream = ()=>({type;INCREMENT_ICE_CREAM})

来防止重复）

composable selectors

您的容器可能看起来像这样：

const selectIceCreamCount = state => state.iceCream.count;
const selectIceDrinkCount = state => state.drinkCream.count;

这里是创建冰淇淋计数容器的方法：

const CounterContainer = function CounterContainer(
  { selector, up, down, remove },
  { ID }
) {
  const dispatch = useDispatch();
  const count = useSelector(selector);
  const propsForPresentational = {
    count
    increment: () => dispatch(incement),
    decrement: () => dispatch(decrement),
  };
  //a container should not return jsx, 
  //  better create a presentational component instead      
  return <div>bunch of jsx</div>
};