using useContext hook get "Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>"

Question

I am using useContext for my react app, I wrap my parent component with provider and in child component I call useContext to get access to global context and also I use useDispatch to dispatch the functions within the context.

export const QuotesContext = React.createContext<QuoteContextInterface>({});
export const QuotesProvider = QuotesContext.Provider;

const ParentComponent = ({}) => {

return (
<QuotesProvider value={{getUsers, users}} >
  <ChildComponent />
</QuotesProvider>
)
}


const ChildComponet = ({}) => {
  const quoteContext = useContext(QuotesContext);
  const dispatch = useDispatch();

useEffect(() => {

  dispatch(quoteContext.getUsers)

 }, [])
}

}

the error I get is Error: Uncaught [Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>] Error: Uncaught [Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>]

also in the error path I see that its is complaining about useDispatch line in child component.

I will appreciate your help

Answer 1

I think you are importing useDispatch from react-redux , while context has nothing to do with this. To change the state of context, your context needs to have it's own state (with useReducer or useState ).