React Native Redux 条件渲染答案

【问题标题】：React Native Redux conditional renderingReact Native Redux 条件渲染
【发布时间】：2020-12-23 14:49:16
【问题描述】：

我正在尝试根据 redux 商店状态在我的应用中呈现 2 个不同的屏幕。

const App = () => {
    return (
        <Provider store={store}>
            <NavigationContainer ref={navigationRef}>
                {store.getState().auth.id ? (
                    <Home />
                ) : (
                    <Stack.Navigator screenOptions={HeaderStyles}>
                        <Stack.Screen
                            name='Splash'
                            component={Splash}
                            options={{ headerShown: false }}
                        />
                        <Stack.Screen name='SignUp' component={SignUp} />
                        <Stack.Screen name='Login' component={Login} />
                    </Stack.Navigator>
                )}
            </NavigationContainer>
        </Provider>
    );
};

启动时store.getState().auth.id 未定义，因此应用程序正确显示启动画面。在此屏幕中，我在商店中设置了 auth.id，但应用程序不会重新呈现并停留在启动画面中。如果我保存任何源文件而不更改任何内容，如果强制重新渲染并且我会正确路由到主页。

如何强制三元运算符在 store 发生变化时再次求值？

【问题讨论】：

标签： react-native redux react-redux

【解决方案1】：

在您的文件中，store 是从它正在创建的文件中导入的，而不是通过 props (mapState || useSelector) 注入的。因为 React 重新渲染是基于 props 的变化 ||状态，组件不知道它应该再次渲染。

解决此问题的简单方法是在子组件中声明条件部分并正确注入 redux 状态。

 <Provider store={store}>
            <NavigationContainer ref={navigationRef}>
               <Navigator />
            </NavigationContainer>
 </Provider>

   ....


const Navigator = () => { 
   let { id } = useSelector(state => state.auth)
   return !!id ? (
                    <Home />
                ) : (
                    <Stack.Navigator screenOptions={HeaderStyles}>
                        <Stack.Screen
                            name='Splash'
                            component={Splash}
                            options={{ headerShown: false }}
                        />
                        <Stack.Screen name='SignUp' component={SignUp} />
                        <Stack.Screen name='Login' component={Login} />
                    </Stack.Navigator>
                )
  }

【讨论】：