reactjs - React Context: จัดเตรียมอินสแตนซ์ของ Api Manager

ฉันต้องการเก็บอินสแตนซ์เดียวของคลาสผู้จัดการ API ของบุคคลที่สามในแอป React ของฉัน

ฉันกำลังพยายามทำสิ่งนี้โดยใช้ 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({ host: apiHost, baseUrl: apiBaseUrl, key: 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. ฉันจะทำให้ instance ของ API กลับมามีสภาพสมบูรณ์หลังจากโหลดหน้าซ้ำโดยใช้ redux-persist ได้อย่างไร?

คำตอบ #1

1. ถ้าคุณแค่อยากใช้เพียงหนึ่งอินสแตนซ์ของ ApiManager ผมไม่คิดว่าคุณจะต้องใช้ Context API แค่สร้างอินสแตนซ์แล้วส่งออก/นำเข้าในไฟล์ที่คุณต้องการใช้ก็พอ
2. คุณสามารถห่อหุ้มตัวจัดการ API ของบุคคลที่สามนั้นเพื่อเพิ่มวิธีการบางอย่างที่คุณต้องการเช่น setSessionToken เพื่อกำหนด/อัปเดต sessionToken เมื่อแอปโหลดหรือเมื่อผู้ใช้ได้รับ/รีเฟรชมัน
3. ทำไมต้องยุ่งกับ redux-presist ในกรณีนี้ (แม้ว่าคุณจะตัดสินใจใช้ Context API) ถ้าไม่ได้ใช้ Redux ถ้าคุณต้องการเก็บ sessionToken ก็เก็บมันใน localStorage หรือแหล่งเก็บข้อมูลอื่นๆ ที่คุณต้องการ มันมี API ที่เรียบง่ายในการตั้งค่า/ดึงค่ามาใช้งาน คุณไม่จำเป็นต้องใช้ไลบรารีสำหรับสิ่งนี้