根据特定url筛选redux状态以显示一个产品及其变体

Question

我目前正在建立一个基于drupal的电子商务react网站。我已经将其设置为进行api调用并在我的react应用程序中存储数据。当我登录控制台时，我得到了我当前的3个产品，并且得到了所有产品变体的另一个数组。州里到处都是。

此外，我有一个显示产品详细信息的页面。它显示描述、颜色选项、尺寸选项等。现在我设置了当我从应用程序中的产品选择器单击链接时，它会移动到产品页面，其中包含我单击的产品名称的url并显示正确的产品描述。但是，我需要对其进行过滤，以便还原状态仅包括该产品及其相关变体。希望这有意义...

不确定你们需要从应用程序中看到什么才能理解我的问题，所以请让我知道，我会添加它们来澄清。谢谢

Answer 1

由于您没有提供代码的任何部分，因此我假设了其中的一部分。

我希望这有助于：

class ProductPage extends Component {
  constructor(props) {
    super(props);
    this.state = { productDetails: {}, relatedProducts: [] };
  }

  componentDidMount() {
    // considering your product URL looks like domain.com/product/product-name
    const productName = window.location.pathname.split('/')[2];
    const productDetails = this.props.productList.find(product => product.name === productName);
    const relatedProducts = this.props.productList.filter(product => // determine how a product can be considered as related to the current product);
    this.setState({ productDetails, relatedProducts });
  }

  render() {
    // render codes...
  }
}

export default connect(
  state => ({
    productList: state.products // or whatever the name of your reducer for your product list in redux store
  })
)(ProductPage);