在 React EXPO 中为 React Redux 包装 <App> 在 <Provider>

Posted 2023-02-19

【中文标题】在 React EXPO 中为 React Redux 包装 <App> 在 <Provider>

【英文标题】：Wrap <App> in <Provider> for React Redux in React EXPO

【发布时间】：2021-10-22 11:24:52

【问题描述】：

如何包装我的整个应用程序以进行 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);

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

错误：在“Connect(App)”的上下文中找不到“store”。要么将根组件包装在 a 中，要么将自定义 React 上下文提供者传递给连接选项中的 Connect(App)，并将相应的 React 上下文消费者传递给。

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

【参考方案1】：

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

【讨论】：

是的，这个。我输入了一些非常相似的东西，不得不离开一会儿，忘了点击保存。

【参考方案2】：

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

【讨论】：

在 react 中我会这样做，但在 React Expo 中，它不允许您访问它为您管理的文件这是文件结构。 prnt.sc/1qdlxzr

@KillianCode 我看到了，然后将App 中的所有组件代码下移一级，并由App 中的redux Provider 包装。你需要App中的redux访问，你在哪里访问/使用setCurrentUser？

啊，好吧，让我试试。

我得到了它的工作谢谢，我会发布我现在是如何做到的。由于拼写错误，我还花了 20 分钟挠头……