Блог

Я хочу сохранить единственный экземпляр класса api manager третьей стороны в моем приложении react.

Я пытаюсь достичь этого, используя Api контекста React, подобный этому:

Контекст 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 = новый 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 вопроса:

1. Имеет ли это вообще смысл?
2. Как бы я установил sessionToken, если он будет обновлен пользователем?
3. Как мне повторно увлажнить экземпляр api после перезагрузки страницы с помощью redux-persist ?

1. Если вы просто хотите использовать один экземпляр ApiManager , то я не думаю, что вам нужен Context API. Просто создайте экземпляр и экспортируйте / импортируйте его в файлы, где вам это нужно.
2. Вы можете обернуть этот сторонний менеджер api, чтобы добавить некоторые необходимые вам методы, например, setSessionToken для установки / обновления sessionToken при загрузке приложения или когда пользователь получает / обновляет его.
3. Зачем беспокоиться redux-presist в этом случае (даже если вы решите использовать Context API), если Redux не задействован. Если вы хотите сохранить, sessionToken поэтому сохраните его в localStorage или любом другом хранилище, которое вы хотите, у него есть простой API для установки / извлечения значений, вам не нужно использовать библиотеку для этого.