Permudahkan Pengurusan Negeri Bertindak: Amalan Terbaik untuk Mengendalikan Status

Kadangkala, kita perlu menguruskan status dalam keadaan tindak balas.
Sebagai contoh, kami mempunyai borang serah dan kami perlu menguruskan status borang tersebut.

Terdapat banyak cara untuk menyatakan status.
Saya akan memperkenalkan contoh buruk untuk menyatakan status.

Contoh buruk

1. Gunakan objek untuk menyatakan status.

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

Ini adalah contoh yang tidak baik kerana statusnya sangat kompleks.
Apabila anda mengemas kini status, anda perlu mengemas kini semua status.

Hanya terdapat tiga corak status dalam contoh ini.

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

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

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

Tetapi apabila anda menggunakan objek untuk menyatakan status, pembaca tidak dapat memahami bahawa terdapat hanya tiga corak.
Jadi ini adalah contoh yang tidak baik.

2. gunakan indeks untuk menyatakan status.

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

Ini adalah contoh yang sangat mudah.
Tetapi terdapat juga masalah dalam contoh ini.

Apabila anda menggunakan indeks untuk menyatakan status, anda perlu mengingati nombor status.
Jika apabila anda perlu menambah status baharu, anda perlu mengemas kini semua nombor status.

Jadi, ini juga bukan contoh yang baik.

3. buat keadaan untuk setiap 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>
        </>
    );
};

Ini juga bukan contoh yang baik.
Anda perlu menguruskan semua keadaan status dalam fungsi sepanjang masa.

Dan jika anda terlupa untuk mengemas kini status, ia akan menjadi pepijat.
Fungsi set semula juga sangat kompleks.

Syor

1. Gunakan rentetan untuk menyatakan status.

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

Ini adalah contoh yang sangat mudah.
Dan anda boleh memahami status dengan mudah.

Apabila anda perlu menambah status baharu, anda boleh menambah status baharu dengan mudah.
Sudah tentu terdapat kontra dalam contoh ini.
Anda tidak boleh menyatakan status dalam status pemuatan dan kejayaan dalam masa yang sama.
Tetapi saya fikir ini bukan masalah besar.

Jadi, jika anda mengurus status dalam keadaan tindak balas, saya syorkan anda menggunakan rentetan untuk menyatakan status.

Kesimpulan

Apabila anda mengurus status dalam keadaan tindak balas, gunakan rentetan untuk menyatakan status.

Ini sangat ringkas dan mudah difahami.
Dan anda boleh menambah status baharu dengan mudah.

Jika anda menggunakan objek atau indeks untuk menyatakan status, anda perlu mengemas kini semua status apabila anda menambah status baharu.
Jadi, saya syorkan untuk menggunakan rentetan untuk menyatakan status.

Terima kasih kerana membaca.

Atas ialah kandungan terperinci Permudahkan Pengurusan Negeri Bertindak: Amalan Terbaik untuk Mengendalikan Status. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!