reactjs - 当用户直接点击产品详细信息页面时如何管理 redux 状态

Question

我正在开发一个 Redux 应用程序，我遇到了一个我不知道如何处理的特殊情况。

假设我有一个ProductsList页面：example.com/products

在这个页面上，我正在调度getProductsredux 操作，它调用 API 并将产品存储在商店中。

在此页面上，我列出了所有产品。现在，用户点击一个产品并推送一个新的 URL，如下所示：example.com/products/product/1

在这个ProductDetails页面上，一个名为的 redux 操作setCurrentProduct被调度。

到目前为止，一切都很好。

但是，当用户example.com/products/product/1直接访问 URL 时，就会出现问题。

在这种情况下，setCurrentProduct操作会被调度，但它会失败，因为商店中还没有产品。

我想我可以在这个ProductDetails页面上添加一个 if-else 语句并检查产品是否存在于商店中，然后首先发送getProducts然后setCurrentProduct。

但我觉得这是一个 hacky 解决方案。

也许，我错了，这是实际的解决方案。

有人可以指导我这个解决方案是否正确，如果不是，那么正确的解决方案是什么。

PS：我正在使用 NextJS。

score 0 · Accepted Answer

我认为后端服务应该提供两个API：

对于前端，example.com/products路由应该调用/api/productsAPI。

examlpe.com/product/:id应该调用/api/product/:idAPI 。

您不需要任何条件语句。详情页不依赖于列表页的 Redux 状态。

redux store 中的状态结构可以是（非规范化，仅用于演示）：

state = {
  products: { status: 'idle', data: [], error: null },
  productDetail: { status: 'idle', data: {}, error: null }
};

产品列表组件使用state.products，产品详细信息组件使用state.productDetail。

当用户直接访问产品详细信息时，组件应启动新的 API 调用以获取产品详细信息。

它与 NextJs 或任何其他框架无关。

1 回答 1