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

user_13849819 0
Viewed 1185

How can wrap my whole app in for 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);

I have this at the moment, but I get an error

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.

I think I need to wrap the whole app in in the index.js file, but the index.js is not provided by Expo

react-redux expo react-native reactjs
2 Answers

Move the Provider up a level to wrap App so it's higher in the React tree to provide the redux context.

It may look something like:

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

App

  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);
user_86908570

So I ended up getting this to work by having 2 files

  • 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);```
user_138498190
Related