在 React EXPO 中将 <App> 包裹在 <Provider> 中用于 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);

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

Error: Could not find "store" in the context of "Connect(App)". Either wrap the root component in a , or pass a custom React context provider to and the corresponding React context consumer to Connect(App) in connect options.

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

不提供 index.js

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

所以我最终通过拥有 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);```

在 React EXPO 中将 <App> 包裹在 <Provider> 中用于 React Redux

Wrap <App> in <Provider> for React Redux in React EXPO

reactjs

react-native

react-redux

expo