Question

这是我在React / Redux应用程序中遇到的问题的高度简化的描述：

问题描述：

假设我有一个具有两个视图的Web应用程序，一个ProductList视图和一个ProductOfTheDay视图。每个视图都有自己的“存储”文件；与视图相关联的保持状态，化简，动作等。

让每个商店的状态结构如下：

// ProductList store state  
const productListState = {
  products: Product[]
};

// ProductOfTheDay store state
const productOfTheDayState = {
  product: Product
};

// Product
interface Product {
  hasAddedToCart: boolean
  ...
}

当用户在ProductList视图上时，他们会看到产品UI元素的列表（有一些Product.tsx组件接受Product并进行呈现）。当用户在ProductOfTheDay视图上时，他们会看到一个产品UI元素。

现在，假设每个产品UI元素上都有一个按钮，允许用户将特定产品添加到他们的购物表中。单击此按钮后，将分派一个addToCart动作，该动作会将处于我状态的相应Product对象更新为hasAddedToCart: true）。

这是问题所在：

我的减速器在单击“添加到购物车”时不知道用户在哪个视图上。因此，他们不知道用户是将ProductList视图中的产品添加到购物车，还是将ProductOfTheDay视图中的产品添加到购物车。结果，减速器不知道是否应该处理该动作。

解决方案1：

我可以调度一个addToCart参数为index的{{1}}动作。如果dispatch(addToCart(index));，那么我知道要让index >= 0减速器来处理它，而我的ProductList减速器会忽略它。如果是ProductOfTheDay，那么我知道相反。

我不喜欢这种解决方案，因为对于减速器来说，推断出他们是否应该处理该动作似乎是一种错误的方式。

解决方案2：

执行index === -1和addToCart操作而不是执行addProductFromListToCart操作。我不喜欢这种方法，因为这些操作最终都会在不同的状态片上执行本质上相同的转换。

解决方案3：

添加具有以下结构的购物车商店：

addProductOfTheDayToCart

然后，我可以调度{ cart: { [productId]: boolean } }，并仅由Cart减速器来处理。我最喜欢这种方法……

寻求帮助：

其他人遇到过这个设计问题吗？您如何构造自己的行动/减少因素来应对这一挑战？如果有任何不清楚的地方，请告诉我，我可以帮助您澄清。

谢谢！

在多个reducer之间共享Redux动作

0 个答案: