reactjs - react 上下文 : Provide instance of an Api Manager

Question

我想在我的 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, key :apKey， session token :持久 session token });

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 个问题:

1. 这有意义吗？
2. 如果用户续订了 sessionToken，我将如何设置它？
3. 如何在使用 redux-persist 重新加载页面后恢复 api 实例？

Answer 1

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