CustomHook -> useDispach = could not find react-redux context value; please ensure the component is wrapped in a <Provider>

Question

useReduxContext.js:24 Uncaught Error: could not find react-redux context value; please ensure the component is wrapped in a

I have a simple custom hook and I am trying to call redux dispatch from my hook in order to organize my logic in 1 place instead call the dispatch in each component

my custom hook:

export function useToggle(data:any) {
  const [val, setToggle] = React.useState(data:any);
  const dispatch = useDispatch();

  const onToggle = (event: any, val: any) => {
    setToggle(val)
  };

  useEffect(()=>{
    setToggle(data:any)
  },[data:any])

  return { val, onToggle };
}

my component that calls the hook for sure is under provider

this my componenet :

      <Parent
 
          >
            <Child />
            <Child2>{renderData()}</Child2>
          </Parent>

and inside Child 2 I have a simple function component with this code

  const { val, onToggle } = useToggle(data);

my index.ts

ReactDOM.render(
  <Provider store={store}>
    <App history={history} />
  </Provider>,
  document.querySelector('#root')
);

You can't use useDispatch without Provider react-redux.js.org/api/provider — Freestyle09
@Freestyle09 I have updated the question , i already have Provider and I use the 'usedispach' all over the code ReactDOM.render( <Provider store={store}> <App history={history} /> </Provider>, document.querySelector('#root') ); — Tuz

Fahmy Chaabane Fahmy Chaabane · Accepted Answer · 2021-02-26T22:43:30

I also had the same problem. I believe the only wrapper for this for now is to use old connect from react-redux.

export default connect(mapStateToProps, mapDispatchToProps)(YourComponentName);

CustomHook -> useDispach = could not find react-redux context value; please ensure the component is wrapped in a <Provider>

1 Answers