React Context：提供 Api Manager 的实例

Posted 2023-02-19

【中文标题】React Context：提供 Api Manager 的实例

【英文标题】：React Context: Provide instance of an Api Manager

【发布时间】：2019-08-12 11:59:10

【问题描述】：

我想在我的 react 应用程序中保留一个第三方 api 管理器类的实例。

我正在尝试使用这样的 React Context Api 来实现这一点：

API 上下文：

import * as React from "react";
import  ApiManager  from "../ApiManager";

const defaultValue = new ApiManager()

const ApiContext = React.createContext(defaultValue);
const ApiProvider = ApiContext.Provider;
const ApiConsumer = ApiContext.Consumer;


const withApi = (enhanced) => 
    return (
        <ApiConsumer>
            api => enhanced 
        </ApiConsumer>
    )


export default ApiContext;
export ApiContext, ApiProvider, ApiConsumer, withApi;

在我的客户中，我会这样做：

const api = new ApiManager( 主机：apiHost， baseUrl: apiBaseUrl, 密钥：apKey， sessionToken:persistedSessionToken );

ReactDOM.hydrate(
    <Provider store=store>
        <PersistGate loading=<h1>loading...</h1> persistor=persistor>
            <BrowserRouter>
                <ApiProvider value=api>
                    <Main />
                </ApiProvider>>
            </BrowserRouter>
        </PersistGate>
    </Provider>, document.querySelector('#app')
);

我有 3 个问题：

这有意义吗？ 如果 sessionToken 被用户更新，我将如何设置它？ 如何在使用redux-persist 重新加载页面后重新水化 api 实例？

【参考方案1】：

如果您只想使用ApiManager 的一个实例，那么我认为您不需要上下文 API。只需创建一个实例并将其导出/导入到您需要的文件中即可。 您可以包装该第三方 api 管理器以添加一些您需要的方法，例如 setSessionToken 以在应用加载或用户接收/刷新它时设置/更新 sessionToken。 如果不涉及 Redux，为什么要在这种情况下使用 redux-presist（即使您决定使用 Context API）。如果您想存储sessionToken，请将其存储在localStorage 或您想要的任何其他存储中，它具有设置/检索值的简单API，您无需为此使用库。