useDispatch() Error: Could not find react-redux context value; please ensure the component is wrapped in a

Question

I am trygin to use React-Redux library and I am getting the error on the title. I wrapped my components with Provider but I still get the error, only if I implement the useDispa

Answer 1

I did this on the same index.js file for a react-native app. This way you avoid having to export and add another file just for giving wrapping the App with the provider.

const ReduxProvider = () => {
    return(
        <Provider store={store}>
            <App />
        </Provider>
    )
}

AppRegistry.registerComponent(appName, () => ReduxProvider);

Answer 2

App must be wrapped in provider since you are using useDispatch in it. Right now it's just a child. Provider sets the context so only its children can have access to it, not a parent.

One solution would be to create a wrapper component for it:

const AppWrapper = () => {
  const store = createStore(rootReducer);

  return (
    <Provider store={store}> // Set context
      <App /> // Now App has access to context
    </Provider>
  )
}

const App = () => {
  const dispatch = useDispatch(); // Works!
...

Answer 3

Happened to me, when I was calling React component as a function, without using it as virtual dom, Comp was independently called not rendered as child of some element

function Comp() {
  const a = useSelector(selectA); // throws error
}
Comp();

so in my case solution was to call Comp and a component, not as a function i.e <Comp />