Wrap <App> <Provider> in React EXPO 中的 React Redux

Question

如何在react redux中包装我的整个应用程序?

componentDidMount() {
firebase.auth().onAuthStateChanged((user) => {
if (user) {
axios.post("/user/create", {
name: user.displayName,
email: user.email,
});
console.log(user.displayName, user.email);
}
});
}
render() {
return (
<Provider store={store}>
<NavigationContainer>
<Tab.Navigator
initialRouteName="Home"
screenOptions={{
headerStyle: { elevation: 0 },
cardStyle: { backgroundColor: "#E5E5E5" },
}}>
<Tab.Screen name="Home" component={HomeScreen}></Tab.Screen>
<Tab.Screen name="News" component={NewsScreen}></Tab.Screen>
<Tab.Screen name="Sessions" component={NewsScreen}></Tab.Screen>
<Tab.Screen name="Account" component={LoginScreen}></Tab.Screen>
</Tab.Navigator>
</NavigationContainer>
</Provider>
);
}
}
const mapDispatchToProps = (dispatch) => ({
setCurrentUser: (user) => dispatch(setCurrentUser(user)),
});
export default connect(null, mapDispatchToProps)(App);

我现在有这个，但是我得到一个错误

错误:找不到"store";在"连接(App)"的背景下。要么将根组件封装在a中，要么将自定义React上下文提供程序传递给Connect(App)，并在Connect选项中传递相应的React上下文消费者。

我想我需要在index.js文件中包装整个应用程序，但是index.js不是Expo提供的

Answer 1

将Provider向上移动一个级别以包裹App，因此在React树中位置更高提供redux上下文。

它可能看起来像:

ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
rootElement
);

应用

render() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="Home"
screenOptions={{
headerStyle: { elevation: 0 },
cardStyle: { backgroundColor: "#E5E5E5" },
}}>
<Tab.Screen name="Home" component={HomeScreen}></Tab.Screen>
<Tab.Screen name="News" component={NewsScreen}></Tab.Screen>
<Tab.Screen name="Sessions" component={NewsScreen}></Tab.Screen>
<Tab.Screen name="Account" component={LoginScreen}></Tab.Screen>
</Tab.Navigator>
</NavigationContainer>
);
}
}
const mapDispatchToProps = {
setCurrentUser,
};
export default connect(null, mapDispatchToProps)(App);

Answer 2

最后我用了两个文件

• App.js
• AppEntry.js

App.js

import { Provider } from "react-redux";
import store from "./src/redux/store";
import AppEntry from "./src/AppEntry";
class App extends React.Component {
render() {
return (
<Provider store={store}>
<AppEntry />
</Provider>
);
}
}
export default App;

AppEntry.js

class AppEntry extends React.Component {
componentDidMount() {
firebase.auth().onAuthStateChanged((user) => {
if (user) {
axios.post("/user/create", {
name: user.displayName,
email: user.email,
});
console.log(user.displayName, user.email);
this.props.setCurrentUser(user);
}
});
}
render() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="Home"
screenOptions={{
headerStyle: { elevation: 0 },
cardStyle: { backgroundColor: "#E5E5E5" },
}}>
<Tab.Screen name="Home" component={HomeScreen}></Tab.Screen>
<Tab.Screen name="News" component={NewsScreen}></Tab.Screen>
<Tab.Screen name="Sessions" component={NewsScreen}></Tab.Screen>
<Tab.Screen name="Account" component={LoginScreen}></Tab.Screen>
</Tab.Navigator>
</NavigationContainer>
);
}
}
const mapDispatchToProps = (dispatch) => ({
setCurrentUser: (user) => dispatch(setCurrentUser(user)),
});
export default connect(null, mapDispatchToProps)(AppEntry);```