将<App>封装在<Provider>中用于反应博览会中的反应残余物

Question

怎么才能把我的整个应用程序包装成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);

我现在有这个，但我有个错误

错误:无法在“连接(应用程序)”的上下文中找到“存储”。或者将根组件包装在连接选项中，或者将自定义的React提供程序和相应的React使用者传递给connect选项中的Connect(App)。

我想我需要将整个应用程序封装在index.js文件中，但是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

所以我用了两个文件来完成这个任务

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