How to we achieve code-reuse if we use React Redux Hooks? - reactjs

Question

Let's say we have a component:
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>
);
}
suppose it actually is a complicated component, and instead of 3 lines of code inside the return (), there are 45 or 80 lines of code. In that case, how do we achieve code-reuse if we don't want to repeat the code if we need to map this component to a different Redux state?
For example,
what if we need two such components on the same page, one for countIceCream and one for countDrink?
if on the To Go Order page, we need such component but it is for countSpoon?

Answer 1

what I will do is
make two components , the First IceCreamCount or DrinkCount and the second is basic Count component which will not be connected to redux
example :
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={...} />
}

Answer 2

If I understand correctly you want to produce the same output but get the state data from different places for CountIceCream and CountDrink. Also the actions are different for CountIceCream and CountDrink.
So here is an example for increment action for CountIceCream and CountDrink:
const incrementDrink = ()=>({type;INCREMENT_DRINK})
const incrementIceCream = ()=>({type;INCREMENT_ICE_CREAM})
Here are the selectors to get count data for drink and ice cream (this is a simple example, in projects I would advice using composable selectors to prevent duplication)
const selectIceCreamCount = state => state.iceCream.count;
const selectIceDrinkCount = state => state.drinkCream.count;
Your container can look something like this:
const CounterContainer = function CounterContainer(
{ selector, up, down, remove },
props
) {
const dispatch = useDispatch();
const count = useSelector(selector);
const propsForPresentational = {
count
increment: () => dispatch(incement),
decrement: () => dispatch(decrement),
...props,
};
//a container should not return jsx,
// better create a presentational component instead
return <div>bunch of jsx</div>
};
Here is how you can create an ice cream count container:
export const IceCreamCountContainer = React.memo(
function IceCreamCountContainer(props) {
return CounterContainer(
{
selector: selectIceCreamCount,
increment:incrementIceCream,
decrement:decrementIceCream,
},
props
);
}
);