Question

使用API COntext和Hooks创建购物车，您只需拥有一个包装有上下文的组件，就可以分派操作以添加和删除购物篮中的产品。

例如

<ShoppingBasketContext.Provider value={useReducer(shoppingBasketActions, shoppingBasketInitialState)}>
{children}
</ShoppingBasket.Provider>

容易。假设您有一个组件，即ShoppingBasket，这是提供商所封装的内容，并且最终是用户单击购物篮图标时看到的页面。然后，您可以通过访问状态来检索篮子中的物品。但是，如果您在导航栏上购物篮图标旁边的购物篮中有很多商品，是否需要使用全局状态才能访问购物篮状态？

如果不使用全局状态，我将无法理解第二种解决方案。

有人可以指出我的正确方向吗？

Answer 1

我们假设

const shoppingBasketInitialState = []

function shoppingBasketActions(state, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return [...state, action.item]
    case 'REMOVE_ITEM':
      return state.filter(item => item.id !== action.item.id)
    default:
      throw new Error();
  }
}

然后您可以按以下方式访问您的商品计数：

const SomeComponent = () => {
  const [items] = useContext(ShoppingBasketContext)
  console.log(items.length) // logs items count
}

不需要全局状态。

导航栏中的上下文如何访问上下文所封装的页面组件的状态？

1 个答案: