考虑到 SolidJS 的反应性，为什么要使用 Context 和 Provider？

我有一个 SPA 项目，它通过访问令牌 (JWT) 对用户进行身份验证和授权。这些短暂的访问令牌也有刷新令牌，因此当它们过期时，应用程序应该刷新访问令牌并重放失败的请求。为了实现这一目标，我想出了一个函数（authAwareFetch) 包裹着全局fetch到; 1. 如果存在访问令牌（即用户已登录），则添加授权标头；2. 检查请求是否失败（由于令牌过期）刷新访问令牌并重播请求。

查明访问令牌是否存在authAwareFetch文件导入令牌存储（tokenStore），它只是一个 SolidJS 存储，用于保存访问令牌、其生命周期（有效直到 EPOCH 时间）和刷新令牌，由createStoreSolidJS 的。
为了能够登录用户，我有这个身份验证service其中导出其他功能login; refreshAccessToken, logout。服务文件也导入tokenStore，其函数读取和写入存储。

给定代码组织上面（在自己的文件中存储和服务）并能够对更改做出反应（打开和关闭组件，感谢 SolidJS），我的问题是Context 和 Provider 的用例是什么？如果我要为每个组件导入一个钩子（例如useAuth）导入商店（到read从它）和服务（到update商店）？我错过了什么吗？
提前致谢。

上下文允许您将值沿着组件树传递，而无需通过父子关系。

假设您想在位于组件层次结构深处三层的组件中使用访问令牌：

const [authoStore, setAuthStore] = createStore({ /* Contents */ });

<ParentA>
  <ParentB>
    <Child />
  </ParentB>
</ParentA>

您可以将商店从 ParentS 传递到 Parent 到 Child：

<ParentA store={authStore}>
  <ParentB store={authStore}>
    <Child store={authStore} />
  </ParentB>
</ParentA>

或者您可以创建一个上下文并将存储作为其值传递，以便子组件可以通过上下文 API 直接访问它。

const AuthContext = createContext(defaultValue);
<AuthContext.Provider value={authStore}>
  <ParentA>
    <ParentB>
      <Child />
    </ParentB>
  </ParentA>
</AuthContext>

在子组件内部：

const Child = () => {
   const authStore = useContext(AuthContext);
   // Snipped
}

现在，如果我们回到最初的问题，使用信号或存储是无关紧要的，因为只要内部组件可以访问身份验证令牌，您就可以使用存储、信号、本地存储甚至普通的 Javascript 对象。但是 Context API 提供了一种在组件之间共享值的简单方法，无论它们在组件层次结构中的位置有多深。

还有其他好处，例如，您可以通过提供不同的值来覆盖组件树不同级别上的值。

Here ChildA将收到该值red while ChildB会收到blue:

<ThemeContext.Provider value='red'>
  <ChildA />
  <ThemeContext.Provider value='blue'>
    <ChildB />
  </ThemeContext.Provider>
</ThemeContext.Provider>

您可以通过上下文传递任何类型的值，包括信号和存储。