在 Redux Provider 外部安全调用 hook 的终极指南：使用自定义 hook

在 Redux Provider 外部安全调用 hook

引言

在 React Redux 应用中，Redux store 是管理应用程序状态的集中式存储库。通常情况下，我们使用 useSelector hook 从 Redux store 中获取状态。然而，当我们尝试在 Redux Provider 外部调用这些 hook 时，就会遇到错误。

问题

如果我们尝试在 Redux Provider 外部调用 useSelector，我们会遇到一个错误：Cannot read properties of null (reading 'store')。这是因为 useSelector 内部依赖于 Redux store，而 Provider 外部无法访问它。

解决方法：使用自定义 hook

为了解决这个问题，我们可以使用自定义 hook。自定义 hook 允许我们创建可重用的代码，可以从组件的任何位置调用。以下是创建 useSafeGetFooId 自定义 hook 的步骤：

• 在一个单独的文件中创建以下 hook：

import { useEffect, useState } from "react";
import { useSelector } from "react-redux";

const useSafeGetFooId = () => {
  const [fooId, setFooId] = useState(null);

  useEffect(() => {
    const getFooIdFromStore = () => {
      try {
        const { fooId: fooIdFromSelector } = useSelector(uiSelector);
        setFooId(fooIdFromSelector);
      } catch (error) {
        // Handle error (e.g., Provider is not available)
      }
    };

    getFooIdFromStore();
  }, []);

  return fooId;
};

• 在需要访问 Foo ID 的组件中，使用自定义 hook：

import useSafeGetFooId from './useSafeGetFooId';

const MyComponent = () => {
  const fooId = useSafeGetFooId();

  // Use fooId here...
};

工作原理

这个自定义 hook 使用 useEffect 钩子来尝试从 Redux store 中获取 Foo ID。如果 Provider 可用，我们成功地从选择器中检索到 Foo ID，我们会设置 fooId 状态。如果 Provider 不可用，我们将捕获错误并返回 null。

优点

这种方法的主要优点是：

• 允许我们安全地在 Redux Provider 外部调用 useSelector。
• 符合 React hook 规则，因为我们只在组件挂载时执行副作用。
• 易于使用和理解。

局限性

这种方法的潜在局限性包括：

• 需要创建并维护一个自定义 hook。
• 可能为每个使用自定义 hook 的组件引入额外的开销。

结论

使用自定义 hook，我们可以安全地在 Redux Provider 外部调用 useSelector hook。这有助于我们保持代码的组织性、可重用性和可读性。

常见问题解答

1. 为什么我们不能直接在 Provider 外部使用 useSelector？

因为 useSelector 内部依赖于 Redux store，而 Provider 外部无法访问它。

2. 我可以在哪些情况下使用 useSafeGetFooId hook？

可以使用该 hook 在任何需要从 Redux store 中访问 Foo ID 的情况下，即使该组件不在 Provider 内部。

3. 这个自定义 hook 是否适用于所有 Redux 状态？

是的，只要你使用 Redux 的 useSelector hook 来获取状态，这个自定义 hook 就可以工作。

4. 我如何处理错误？

你可以通过在 useSafeGetFooId hook 的 useEffect 中的 catch 块中处理错误来处理错误。

5. 使用这个自定义 hook 有什么性能影响吗？

由于我们只在组件挂载时执行副作用，因此使用这个自定义 hook 通常不会对性能产生重大影响。