Search code examples
reactjsreact-nativereduxreact-redux

could not find react-redux context value; please ensure the component is wrapped in a Provider

I was trying out react-native with redux and I got some issues.

I wrap up the NavigationContainer with Provider but still getting:

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

this happens when ever I use selector to select state value and console log it.

enter image description here

My slice class looks something like this:

enter image description here

My Store class looks something like this:

enter image description here

Solution

  • The error below is telling you that you are trying to read react-redux context value (store) without first providing the context values.

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

    If you need to access redux store in App component, you should wrap the App component with <Provider />, so that it can provide the react-redux context values to App and other nested components.

    So, you can use Provider in index.jsx or index.js:

    ReactDOM.render(
  <StrictMode>
    <Provider store={store}> {/* HERE */}
      <App /> {/* Now, App is wrapped in Provider and hence can read from store */}
    </Provider>
  </StrictMode>,
  document.getElementById('root')
)

    After this, you can use useSelector (or connect) to read redux store in App or any other nested component:

    const countryCode = useSelector(selectCountryCode)