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

Question

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

一个具有以下初始状态的productsReducer:

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

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

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

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,
    }
  }

我将两个 reducer 组合如下:

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

最初，我将两个 reducer 的操作放在一个地方，这样我就可以在我的 ADD_TO_CART 函数中访问 products 数组。但现在我已将操作拆分为单独的 reducer ，我不知道如何从 cartsReducer 内的 productsReducer 访问 products 数组。

有人可以帮忙吗？

Answer 1

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

当您在应用程序中对状态进行建模时，您应该致力于不出现重复的实体。在您的情况下，您要将产品添加到购物车，但该产品已存储在产品列表中。将产品放在两个地方会造成重复(如果以某种方式修改该产品会发生什么？您必须更改它两次)。

相反，您可以将产品 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可能会让工作变得更容易。