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

Question

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

A productsReducer 具有以下初始状态：

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

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

我有另一个名为 cartReducer 的减速器，它具有以下初始状态并且必须执行 'add to cart' 操作：

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 的操作，因此我可以在我的 ADD_TO_CART 函数中访问 products 数组。但是现在我已经将动作拆分为单独的 reducer，我不知道如何从 cartsReducer.

中的 productsReducer 访问 products 数组

有人可以帮忙吗？

Answer 1

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

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

相反，您可以将产品 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 的状态

How to access state of another reducer in Redux

javascript

reactjs

redux

redux-saga