React Context：提供 Api Manager 的实例答案

【问题标题】：React Context: Provide instance of an Api ManagerReact Context：提供 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 实例？

【问题讨论】：

标签： reactjs typescript react-context redux-persist

【解决方案1】：

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

【讨论】：