useDispatch () Ошибка: не удалось найти значение контекстаact-redux; пожалуйста, убедитесь, что компонент обернут в <Provider>

Question

Я пытаюсь использовать библиотеку React-Redux и получаю сообщение об ошибке в заголовке. Я обернул свои компоненты с помощью Provider, но все равно получаю сообщение об ошибке, только если я реализую хук useDispatch ().

Приложение работало нормально, пока я не добавил строку useDispatch (). Остальные строки, касающиеся функции отправки, могут быть удалены, и я все еще получаю ту же ошибку.

Если бы вы могли мне помочь, я был бы очень признателен. Спасибо

Вот мой код:

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 должен быть включен в провайдера, так как вы используете useDispatch в нем. Прямо сейчас это просто ребенок. Provider устанавливает контекст так, что только его дочерние элементы могут иметь к нему доступ, но не родитель.

Одним из решений было бы создание для него компонента-оболочки:

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