React redux 子项使用上下文或简单的选择

Question

我有一个家长使用

const isAuthenticated = useSelector(selectIsAuthenticated);

使用相同的选择器的最佳方法是什么

在孩子身上

或使用上下文提供程序，例如

• 父母

• 孩子

  const isAuthenticated = useContext(AuthContext(;

Answer 1

通常，您重复使用选择器，因为它只是一个函数。

export const selectIsAuthenticated = state => state.isAuthenticated;
// Usage
import { selectIsAuthenticated } from './auth-selectors.js'
const isAuthenticated = useSelector(selectIsAuthenticated);

或者将其重新用作自定义钩子：

import { selectIsAuthenticated } from './auth-selectors.js'
export const useAuth = () => {
const isAuthenticated = useSelector(selectIsAuthenticated);
// more auth related code ...
return { isAuthenticated };
};
// usage
const { isAuthenticated } = useAuth();

Answer 2

要获取身份验证信息，最好的方法是使用

const isAuthenticated = useSelector(selectIsAuthenticated);

在所有需要身份验证信息的地方，这也是自定义钩子的目的，首先在一个地方有一个共同的重用逻辑。

为相同的信息创建另一个上下文不会提供任何好处。

在这两种情况下，无论您再次使用上下文还是选择器钩子，只有上下文的使用者才会呈现。

因此，在所有位置使用 useSelector 钩子可以为您省去再次创建上下文的额外麻烦，无论如何，这都不会提供任何额外的好处。