Как получить доступ к состоянию контекста в панели навигации для компонента страницы, который инкапсулирует этот контекст?

Question

Используя API COntext и Hooks для создания корзины покупок, вы просто должны иметь компонент с обернутым вокруг него контекстом, который позволяет отправлять действия по добавлению и удалению товаров из корзины.

, например

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

Easy. Допустим, у вас есть компонент, представляющий собой ваш 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
}

Нет необходимости в глобальном состоянии.