我正在与另一个开发人员合作一个项目,我们在身份验证流应该如何进行的问题上陷入僵局.我们使用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 是有代价的.

在这种情况下,最佳方法/实践是什么?

推荐答案

这里是Redux维护人员. 请永远不要在您的组件中像那样使用store.getState().

如果您的存储在后台更改,组件将不会使用新值重新呈现.如果您正确编写了 Select 器,则仅当 Select 器的值更改时才会重新呈现.

所以你可以在这里进行优化,但应该保留useSelector呼叫.

const isOnboarded = useSelector((state:RootState) => state.auth.accessToken.isOnboarded)

好多了.

Typescript相关问答推荐

类型脚本强制泛型类型安全

如何使用一个字段输入对象,其中每个键只能是数组中对象的id属性,而数组是另一个字段?

在不更改类型签名的情况下在数组并集上映射文字

为什么T[数字]不也返回UNDEFINED?

TypeScrip:逐个 case Select 退出noUncheck kedIndexedAccess

如何使用WebStorm调试NextJS的TypeScrip服务器端代码?

带下拉菜单的Angular 响应式选项卡

有没有可能为这样的函数写一个类型?

部分更新类型的类型相等

如何创建一家Reduxstore ?

编译TypeScrip项目的一部分导致错误

Angular material 无法显示通过API获取的数据

创建Angular 为17的动态形状时出错

推断集合访问器类型

如何调整项目数组,但允许权重影响顺序

如何知道使用TypeScript时是否在临时工作流内运行

我应该使用服务方法(依赖于可观察的)在组件中进行计算吗?

TS 条件类型无法识别条件参数

为什么 typescript 在对象合并期间无法判断无效键?

为什么我们在条件语句中使用方括号[]?