是否可以连接 redux 存储并在顶级元素 - App.tsx 中使用它？

Question

在我的应用程序启动时我有一个启动屏幕。当显示启动时，我使用

asyncStorage

检索一些数据。我想将该数据保存到我的商店中。所以我将我的

App.ts

组件连接到商店，如下所示：

const mapDispatchToProps = (dispatch:any) => ({
  setTokenValidity: (isTokenValid:boolean) => dispatch(setTokenValidity(isTokenValid))
})

const mapStateToProps = (state:any) => ({
  isTokenValid: state.isTokenValid
})

export default connect(mapStateToProps, mapDispatchToProps)(App);

这是

App.ts

的其余设置：

const Stack = createStackNavigator();
let userToken = null;

const App = (props:any) => {

  const [IsSignedIn, setIsSignedIn] = useState(false);
  useEffect(() => {

    const bootstrapAsync = async () => {
      try {
        userToken = await retrieveData('Token',null);    
        SplashScreen.hide();

        if(userToken != null) {
          setIsSignedIn(true);
          props.setTokenValidity(true)
        }

      } catch (e) {
        // Restoring token failed
      }
    };

    bootstrapAsync();
  }, []);
  
  return (
    <Provider store={storeFactory()}>
    <NavigationContainer>
    <Stack.Navigator >
    {!props.isTokenValid ? (
      <>
      <Stack.Screen name="Login" component={Login} options={{ headerShown:false }}/>
      <Stack.Screen name="Home" component={Home} options={{ headerShown:false }}/>
      </>
      
      ) : (
      <Stack.Screen name="Home" component={Home} options={{ headerShown:false }}/>
      )}
    </Stack.Navigator >  
  </NavigationContainer>
  </Provider>
  );
};

当我运行应用程序时，我收到一条错误消息：

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

我的问题是，是否可以在这个顶层连接到商店，或者只能在子组件中完成？

Answer 1

正如您所说，在您的情况下只能在子组件中完成。要在 App

 上使用连接，您需要将 

<Provider>

 元素在层次结构中向上移动一级。通常，您会有某种 

<Root>

 元素来负责设置商店，然后 

App

 作为它的后代。