Vereinfachen Sie die Verwaltung des Reaktionsstatus: Best Practices für den Umgang mit dem Status

Manchmal müssen wir den Status im Reaktionszustand verwalten.
Beispielsweise haben wir ein Absendeformular und müssen den Status des Formulars verwalten.

Es gibt viele Möglichkeiten, den Status auszudrücken.
Ich werde das schlechte Beispiel einführen, um den Status auszudrücken.

Schlechtes Beispiel

1. Verwenden Sie das Objekt, um den Status auszudrücken.

const Page = () => {
    const [status, setStatus] = useState<{ loading: boolean, error: boolean, success: boolean }>({ loading: false, error: false, success: false });

    const fetchUser = async () => {
        setStatus({ loading: true, error: false, success: false });
        try {
            const user = await api.getUser();
            setStatus({ loading: false, error: false, success: true });
        } catch (e) {
            setStatus({ loading: false, error: true, success: false });
        }
    };

    return (
        <>
            {status.loading && <div>Loading...</div>}
            {status.error && <div>Error...</div>}
            {status.success && <div>Success...</div>}
            <button onClick={fetchUser}>Fetch</button>
        </>
    );
};

Das ist ein schlechtes Beispiel, weil der Status sehr komplex ist.
Wenn Sie den Status aktualisieren, müssen Sie den gesamten Status aktualisieren.

In diesem Beispiel gibt es nur drei Statusmuster.

// loading
setStatus({ loading: true, error: false, success: false });

// success
setStatus({ loading: false, error: false, success: true });

// error
setStatus({ loading: false, error: true, success: false });

Aber wenn Sie ein Objekt verwenden, um den Status auszudrücken, kann der Leser nicht verstehen, dass es nur drei Muster gibt.
Das ist also ein schlechtes Beispiel.

2. Verwenden Sie den Index, um den Status auszudrücken.

const Page = () => {
    const [status, setStatus] = useState<0 | 1 | 2 | 3>(3);
    const [user, setUser] = useState<User | null>(null);

    const fetchUser = async () => {
        setStatus(0);
        try {
            const user = await api.getUser();
            setUser(user);
            setStatus(2);
        } catch (e) {
            setStatus(1);
        }
    };

    const reset = () => {
        setUser(null);
        setStatus(3);
    };

    return (
        <>
            {status === 0 && <div>Loading...</div>}
            {status === 1 && <div>Error...</div>}
            {status === 2 && <div>{user?.name}</div>}
            <button onClick={fetchUser}>Fetch</button>
            <button onClick={reset}>Reset</button>
        </>
    );
};

Dies ist ein sehr einfaches Beispiel.
Aber auch in diesem Beispiel gibt es ein Problem.

Wenn Sie den Index verwenden, um den Status auszudrücken, müssen Sie sich die Statusnummer merken.
Wenn Sie einen neuen Status hinzufügen müssen, müssen Sie alle Statusnummern aktualisieren.

Das ist also auch kein gutes Beispiel.

3. Erstellen Sie einen Status für jeden Status.

const Page = () => {
    const [loading, setLoading] = useState<boolean>(false);
    const [error, setError] = useState<boolean>(false);
    const [success, setSuccess] = useState<boolean>(false);
    const [user, setUser] = useState<User | null>(null);

    const fetchUser = async () => {
        setLoading(true);
        try {
            const user = await api.getUser();
            setUser(user);
            setSuccess(true);
        } catch (e) {
            setError(true);
        }
    };

    const reset = () => {
        setUser(null);
        setLoading(false);
        setError(false);
        setSuccess(false);
    };

    return (
        <>
            {loading && <div>Loading...</div>}
            {error && <div>Error...</div>}
            {success && <div>{user?.name}</div>}
            <button onClick={fetchUser}>Fetch</button>
            <button onClick={reset}>Reset</button>
        </>
    );
};

Das ist auch kein gutes Beispiel.
Sie müssen den gesamten Statusstatus in der Funktion ständig verwalten.

Und wenn Sie vergessen, den Status zu aktualisieren, liegt ein Fehler vor.
Auch die Reset-Funktion ist sehr komplex.

Empfehlung

1. Verwenden Sie die Zeichenfolge, um den Status auszudrücken.

const Page = () => {
    const [status, setStatus] = useState<'loading' | 'error' | 'success' | 'idle'>('idle');
    const [user, setUser] = useState<User | null>(null);

    const fetchUser = async () => {
        setStatus('loading');
        try {
            const user = await api.getUser();
            setUser(user);
            setStatus('success');
        } catch (e) {
            setStatus('error');
        }
    };

    const reset = () => {
        setUser(null);
        setStatus('idle');
    };

    return (
        <>
            {status === 'loading' && <div>Loading...</div>}
            {status === 'error' && <div>Error...</div>}
            {status === 'success' && <div>{user?.name}</div>}
            <button onClick={fetchUser}>Fetch</button>
            <button onClick={reset}>Reset</button>
        </>
    );
};

Dies ist ein sehr einfaches Beispiel.
Und Sie können den Status leicht verstehen.

Wenn Sie einen neuen Status hinzufügen müssen, können Sie ganz einfach einen neuen Status hinzufügen.
Natürlich gibt es in diesem Beispiel auch Nachteile.
Sie können den Status nicht gleichzeitig im Lade- und Erfolgsstatus ausdrücken.
Aber ich dachte, das sei kein großes Problem.

Wenn Sie also den Status im Reaktionsstatus verwalten, empfehle ich, die Zeichenfolge zu verwenden, um den Status auszudrücken.

Abschluss

Wenn Sie den Status im Reaktionsstatus verwalten, verwenden Sie die Zeichenfolge, um den Status auszudrücken.

Das ist sehr einfach und leicht zu verstehen.
Und Sie können ganz einfach einen neuen Status hinzufügen.

Wenn Sie das Objekt oder den Index verwenden, um den Status auszudrücken, müssen Sie den gesamten Status aktualisieren, wenn Sie einen neuen Status hinzufügen.
Daher empfehle ich, die Zeichenfolge zu verwenden, um den Status auszudrücken.

Vielen Dank fürs Lesen.

Das obige ist der detaillierte Inhalt vonVereinfachen Sie die Verwaltung des Reaktionsstatus: Best Practices für den Umgang mit dem Status. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!