Simplifier la gestion de l'état de React : meilleures pratiques pour gérer l'état

Parfois, nous devons gérer le statut dans l'état de réaction.
Par exemple, nous avons un formulaire de soumission et nous devons gérer le statut du formulaire.

Il existe de nombreuses façons d'exprimer le statut.
Je vais présenter le mauvais exemple pour exprimer le statut.

Mauvais exemple

1. Utilisez l'objet pour exprimer le statut.

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>
        </>
    );
};

C'est un mauvais exemple car le statut est très complexe.
Lorsque vous mettez à jour le statut, vous devez mettre à jour tous les statuts.

Il n'y a que trois modèles de statut dans cet exemple.

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

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

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

Mais lorsque vous utilisez un objet pour exprimer le statut, le lecteur ne peut pas comprendre qu'il n'y a que trois modèles.
C'est donc un mauvais exemple.

2. utilisez l'index pour exprimer le statut.

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>
        </>
    );
};

Ceci est un exemple très simple.
Mais il y a aussi un problème dans cet exemple.

Lorsque vous utilisez l'index pour exprimer le statut, vous devez vous souvenir du numéro de statut.
Si lorsque vous devez ajouter un nouveau statut, vous devez mettre à jour tous les numéros de statut.

Donc, ce n'est pas non plus un bon exemple.

3. créez un état pour chaque statut.

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>
        </>
    );
};

Ce n'est pas non plus un bon exemple.
Vous devez gérer tout le statut de la fonction à tout moment.

Et si vous oubliez de mettre à jour le statut, ce sera un bug.
La fonction de réinitialisation est également très complexe.

Recommandation

1. Utilisez la chaîne pour exprimer le statut.

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>
        </>
    );
};

Ceci est un exemple très simple.
Et vous pouvez facilement comprendre le statut.

Lorsque vous devez ajouter un nouveau statut, vous pouvez facilement ajouter un nouveau statut.
Bien sûr, il y a des inconvénients dans cet exemple.
Vous ne pouvez pas exprimer le statut dans le statut de chargement et de réussite en même temps.
Mais je pensais que ce n'était pas un gros problème.

Donc si vous gérez le statut dans l'état de réaction, je vous recommande d'utiliser la chaîne pour exprimer le statut.

Conclusion

Lorsque vous gérez le statut dans l'état de réaction, utilisez la chaîne pour exprimer le statut.

C'est très simple et facile à comprendre.
Et vous pouvez facilement ajouter un nouveau statut.

Si vous utilisez l'objet ou l'index pour exprimer le statut, vous devez mettre à jour tous les statuts lorsque vous ajoutez un nouveau statut.
Donc, je recommande d'utiliser la chaîne pour exprimer le statut.

Merci d'avoir lu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!