Если в React у нас есть два компонента Counter, нужно ли нам дублировать код Counter?

Question

В React / Redux, если наш код компонента Counter состоит из 30 строк, и, скажем, мы хотим, чтобы один счетчик был подключен к хранилищу Redux как countNoodle, а другой счетчик подключен к хранилищу Redux как countDrink, делаем ли мы нужно продублировать эти 30 строк кода?

Я не думал, что нам нужны CounterNoodle. js и CounterDrink. js и установить соединение с Redux, и каждый файл может иметь длину 40 строк, и это много повторяющегося кода.

Или мы можем повторно использовать код, если Counter является либо компонентом класса, либо компонентом функции?

Answer 1

Конечно, нет, вы можете оставить базовый компонент одинаковым и просто создать два подключенных компонента, используя два разных mapStateToProps

function Counter({value}) {
  return <div>{value}</div>;
}

export const CounterNoodle = connect(state => state.countNoodle)(Counter);

export const CounterDrink = connect(state => state.countDrinkg)(Counter);

Обратите внимание, что два подключенных компонента выбирают разные части укажите, если вашему счетчику нужно отправить действие, вы можете использовать mapDispatchToProps в качестве второго аргумента

Answer 2

Не могли бы вы передать значение count компоненту, который позволит вам передать в него любое значение, независимо от того, где оно находится в состоянии.

Что-то вроде:

const countSelector = (state) => {
  return {
    drinkCount: state.drinks.total,
    noodleCount: state.noodles.total
  }
}

function App() {
  const { drinkCount, noodleCount } = useSelector(countSelector) 

return <div>
  Drink:
  <Counter count={drinkCount} />

  Noodle:
  <Counter count={noodleCount} />
</div>

}

Если вам нужно подписать компонент Counter на состояние, вы также можете сделать что-то вроде этого:

const countSelector = (type) => (state) => {
  return type === 'drink' ? state.drinks.total : state.noodles.total
}

function Counter({ type }) {
  const count = useSelector(countSelector(type))

  return <div>{count}</div>
}

<Counter type="drink" />