Могу ли я подключить свой компонент к определенному узлу в магазине на основе параметра props?

Question

Мой магазин редуксов выглядит так:

"products":[
  {
    "product-id":"P1",
    "product-name":"Computer"
  },
  {
    "product-id":"P2",
    "product-name":"Monitor"
  },
  {
    "product-id":"P3",
    "product-name":"Keyboard"
  },
  {
    "product-id":"P4",
    "product-name":"Mouse"
  }
]

Теперь у меня есть компонент, который получает идентификатор продукта в качестве реквизита. Есть ли способ сопоставить состояние с реквизитом на основе идентификатора продукта? Например, если: props.product_id = "P2", то я хочу сопоставить только узлу "product-id": "P2" с компонентами props.

Возможно, я ошибаюсь, когда мы используем connect () для подключения ко всему магазину, но я хочу, чтобы mapStateToProps экономил (не уверен, имеет ли это смысл).

Спасибо.

Answer 1

Вы можете владеть Props, который является необязательным параметром в mapStateToProps (ссылка: https://react-redux.js.org/using-react-redux/connect-mapstate#ownprops -опциональный )

, тогда ваш код будет выглядеть примерно так:

function mapStateToProps(state, ownProps) {
  const { products } = state
  const { product_id } = ownProps
  const filteredProduct = products.find(({product-id}) => product-id ===product_id)

  return { filteredProduct }
}