Создание крюка для общего состояния в реакции

Question

У меня есть общий виджет, который используется несколькими компонентами. Каждый компонент, использующий общий компонент, должен иметь одинаковые переменные состояния, и мне интересно, можно ли и как это можно абстрагировать в пользовательский хук. Вот общее состояние:

const [
  { leftCount, rightCount, isActive },
  setState,
] = useState({
  leftCount: 0,
  rightCount: 0,
  isActive: false,
})

Также некоторые распространенные методы:

const handleLeftClick = () => {
  setState(state => ({
    ...state,
    leftCount: leftCount + 1,
  }))
}
const handleRightClick = () => {
  setState(state => ({
    ...state,
    rightCount: rightCount + 1,
  }))

...

Answer 1

При использовании специальных пользовательских хуков абстрактная версия должна выглядеть следующим образом (вы хотите поделиться логи c):

const useCommon = () => {
  const [{ leftCount, rightCount, isActive }, setState] = useState({
    leftCount: 0,
    rightCount: 0,
    isActive: false
  });

  // Rest of your logic 

  // Return everything you want (I just return a sample, You can return your handlers or anything else)
  return [{ leftCount, rightCount, isActive }, setState]; 
};