我正在尝试使用 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;
App必须包装在提供程序中,因为您正在使用useDispatch它。现在它只是一个子项。Provider设置上下文,以便只有其子项可以访问它,而父项则不能。
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! ...