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

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 useDispatch() hook.

The app worked fine, until I added the useDispatch() line. The rest of lines regarding the dispatch function can be removed and I still get the same error.

If you could help me I would really appreciate it. Thanks

Here is my code:

import 'react-native-gesture-handler'; import {NavigationContainer} from '@react-navigation/native'; import Navigator from './navigation/Navigator';  import React, {useEffect, useState, useCallback} from 'react'; import {SafeAreaView, StyleSheet, Text, View} from 'react-native';  import {createStore, combineReducers} from 'redux'; import {Provider, useDispatch} from 'react-redux'; import dataReducer from './store/reducers/dataReducer'; import {CONSTANTS} from './constants/constants'; import {saveInitialData} from './store/actions/dataActions';  const App = () => {   const [fetched, setFetched] = useState(initialState);    const dispatch = useDispatch();    const saveInitialDataHandler = useCallback(data => {     dispatch(saveInitialData(data));     callback;   }, []);    const rootReducer = combineReducers({     content: dataReducer,   });    const store = createStore(rootReducer);    useEffect(() => {     fetchData();   }, []);    const fetchData = () => {     fetch(CONSTANTS.database)       .then(response => response.json())       .then(responseJSON => {         setFetched(true);         saveInitialDataHandler(responseJSON);       });   };    if (!fetched) {     return (       <Provider store={store}>         <View stlye={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>           <Text></Text>         </View>       </Provider>     );   } else {     return (       <Provider store={store}>         <NavigationContainer>           <SafeAreaView style={styles.SafeAreaView}>             <Navigator></Navigator>           </SafeAreaView>         </NavigationContainer>       </Provider>     );   } };  const styles = StyleSheet.create({   SafeAreaView: {flex: 1}, });  export default App; 

Answer 1

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! ...