我正在与另一个开发人员合作一个项目,我们在身份验证流应该如何进行的问题上陷入僵局.我们使用RTK进行状态管理.在EntryPoint.tsx
米比赛中,我的方法如下:
export default function EntryPoint({ layoutHandler }: EntryPointProps) {
const { isDarkMode, themeColors } = useContext(ThemeContext);
const { accessToken } = useSelector((state:RootState) => state.auth)
return (
<>
<StatusBar
animated
backgroundColor={themeColors['neutral-00']}
barStyle={isDarkMode ? 'light-content' : 'dark-content'}
/>
<View
onLayout={layoutHandler}
style={[
globalStyles.container,
{
backgroundColor: themeColors['neutral-00'],
paddingBottom:
Platform.OS === 'android' ? styleGuide.layout.spacing.md : 0,
},
]}
>
{!accessToken ? <AuthNavigator /> : <MainNavigator />}
</View>
</>
);
}
在这种方法中,在注销期间,所需要做的就是删除/销毁accesToken,然后您将被发送到包含用于身份验证(入网、登录、验证登录)屏幕的导航器堆栈
以下是我的同事的做法
export default function EntryPoint({ layoutHandler }: EntryPointProps) {
const { isDarkMode, themeColors } = useContext(ThemeContext);
const authState = store.getState().auth as AuthStateType;
const { isOnboarded } = authState;
return (
<>
<StatusBar
animated
backgroundColor={themeColors['neutral-00']}
barStyle={isDarkMode ? 'light-content' : 'dark-content'}
/>
<View
onLayout={layoutHandler}
style={[
globalStyles.container,
{
backgroundColor: themeColors['neutral-00'],
paddingBottom:
Platform.OS === 'android' ? styleGuide.layout.spacing.md : 0,
},
]}
>
{!isOnboarded ? <OnboardingNavigator /> : <AuthNavigator />}
</View>
</>
);
}
基本上,他现在重新排列了导航器堆栈,使OnBoardingNavigator
堆栈只包含Login和AuthNavigator堆栈.请注意,AuthNavigator
现在再次包含登录屏幕和MainNavigator.注销的工作方式现在是这样的:在删除accesToken之后,我们导航回登录屏幕.
他采取这种做法的原因是,他不想使用useSelector
,因为订阅这家store 的成本很高,而且会导致未知和不可预测.
我严重不同意这一点,因为我认为订阅的成本不值得重构所有的导航堆栈,这些导航堆栈现在将多个屏幕混合在它们不属于的堆栈中.简单地使用useSelector
就会让这款应用做出react .然而,他表示,核react 是有代价的.
在这种情况下,最佳方法/实践是什么?