React Hooks - useContext and State

Rajesh Jain — Mon, 22 Jul 2019 23:48:35 +0000

I am using useContext react hook, and when I get the context from the useContext, is there a way to access the state?

I might be mixing up things,

here is my global state component

    <GlobalContext.Provider
      value={{
        loadingProducts: state.loadingProducts,
        products: state.products,
        cart: state.cart,
        searchTerm: state.searchTerm,
        addProductToCart: addProductToCart,
        removeProductFromCart: removeProductFromCart,
        showAllProducts: showAllProducts,
        showFilteredProducts: showFilteredProducts,
        initCatalog: initCatalog,
        catalogLoadSuccess: catalogLoadSuccess,
        catalogLoadFailure: catalogLoadFailure

      }}
    >
      {props.children}
    </GlobalContext.Provider>

and here is my initial state object

const initialState = {
  initialProducts: [],
  products: [],
  cart: [],
  searchTerm: '',
  loadingProducts: true
};

I have initialized the Global State

const GlobalState = props => {
  const [state, dispatch] = useReducer(reducer, initialState);

I want to get to the state object (loadingProducts) from my component and this is how I am getting it.

  const context = useContext(GlobalContext);
  const {loadingProducts} = context.loadingProducts

Question: Can I access the state directly from context, in my component
ie.

const context = useContext(GlobalContext);

// Or is there an alternative?
const state = context.state

React Hooks - useContext with multiple context

Rajesh Jain — Fri, 19 Jul 2019 20:59:40 +0000

Here is my question/confusion.

I am following some code examples to create GlobalState and then use the react Hooks useContext to access the state.

here is the example code
https://github.com/academind/react-redux-vs-context/blob/context-hooks/src/context/GlobalState.js

and Example video
https://www.youtube.com/watch?v=R_7XRX7nLsw

My question is, if I have multiple components, each trying to access the global state, do I create a global context or do I create multiple context. And then how do I use the provider and consumer if I have multiple context.

Forem: Rajesh Jain

React Hooks - useContext and State

React Hooks - useContext with multiple context