如何访问 Redux 中另一个减速器的 state

Question

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

具有以下初始 state 的productsReducer ：

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

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

我有另一个名为cartReducer的减速器，它具有以下初始 state 并且必须实施和“添加到购物车”操作：

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;

最初我在一个地方有两个减速器的动作，所以我可以访问我的ADD_TO_CART function 中的products数组。 但是现在我已将操作拆分为单独的减速器，我不知道如何从cartsReducer中的productsReducer访问products数组。

有人可以帮忙吗？

Answer 1

在redux中reducers不应相互依赖。 您可以将减速器想象为 function，它接收一个动作和一个现有的 state，并从中生成一个新的 state。 这样，每次使用相同参数的调用总是会返回相同的结果。

当您在应用程序中对 state 进行建模时，您的目标应该是不存在重复的实体。 在您的情况下，您正在将产品添加到购物车，但该产品已存储在产品列表中。 将产品放在两个地方会造成重复（如果以某种方式修改该产品会发生什么？您将不得不更改它两次）。

相反，您可以将产品 ID 存储在购物车中，并在需要访问时使用选择器将 state 的两部分组合起来。

所以你的 state 可能看起来像：

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

你可以做一个 function 类似于：

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

您会注意到使用 state 可能会变得很麻烦。 这就是为什么标准化 state可能会使其更易于使用。