Question

因此，我是React的新手，我正在尝试构建一个简单的购物应用程序。我也在使用Redux商店和Saga。
我有两个减速器。

具有以下初始状态的productsReducer：

const initState = {
  products: [],
  loading: false
}

我正在通过products API调用在get数组中加载产品数据。

我有另一个称为cartReducer的化简器，它具有以下初始状态，并且必须实现并“添加到购物车”操作：

const initState = {
  loading: false,
  cartItems: [],
  cartCount: 0
}

添加到购物车的代码为：

case 'ADD_TO_CART':
  let addedItem = state.products.find(product => product.id === action.id)
  // products array contained list of products
  let existed_item = state.cartItems.find(product => action.id === product.id)
  if (existed_item) {
    existed_item.quantity += 1
    return {
      ...state,
      cartItems: state.cartItems,
      cartCount: state.cartItems.length,
    }
  } else {
    let newItem = Object.assign({}, addedItem);
    newItem.quantity = 1;
    return {
      ...state,
      cartItems: [...state.cartItems, newItem],
      cartCount: state.cartItems.length,
    }
  }

我将两种减速器组合如下：

const rootReducer = combineReducers({
  cartReducer,
  productsReducer
})
export default rootReducer;

最初，我在一个地方同时执行了两个reducer的动作，因此可以在products函数中访问ADD_TO_CART数组。但是，既然我已将操作分成单独的化简器，我不知道如何从products内部的productsReducer访问cartsReducer数组。

有人可以帮忙吗？

Answer 1

reducers在redux中不应相互依赖。您可以将reducer想象为一个函数，该函数接收一个动作和一个现有状态，并从中产生一个新状态。这样，每次使用相同参数的调用总是会返回相同的结果。

在应用程序中对状态进行建模时，应以不重复实体为目标。在您的情况下，您要将产品添加到购物车，但是该产品已经存储在产品列表中。在两个位置上都有产品会产生重复（如果以某种方式修改了产品会发生什么情况？您必须对其进行两次更改）。

相反，您可以将产品ID存储在购物车中，并在每次需要访问时使用selector组合两个状态。

所以您的状态可能如下：

{
 products: [ { id: 1, details: {} } ],
 cart: { items: [1,2,3] }
}

，您可以执行类似于以下功能：

function productsInCart(state) {
  const ids = state.cart.items
  const products = findWithId(state.products, ids)
}

您会注意到，与国家合作可能会很麻烦。这就是normalizing the state可能使使用起来更容易的原因。

如何在Redux中访问另一个reducer的状态

1 个答案: