React 状態管理の簡素化: ステータス処理のベスト プラクティス

場合によっては、react 状態でステータスを管理する必要があります。
たとえば、送信フォームがあり、フォームのステータスを管理する必要があります。

ステータスを表現する方法はたくさんあります。
ステータスを表す悪い例を紹介します。

悪い例

1. オブジェクトを使用してステータスを表現します。

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

ステータスは非常に複雑なので、これは悪い例です。
ステータスを更新する場合は、すべてのステータスを更新する必要があります。

この例にはステータス パターンが 3 つだけあります。

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

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

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

しかし、オブジェクトを使用してステータスを表現する場合、読者は 3 つのパターンしかないことを理解できません。
したがって、これは悪い例です。

2. インデックスを使用してステータスを表現します。

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

これは非常に簡単な例です。
しかし、この例にも問題があります。

インデックスを使用してステータスを表現する場合、ステータス番号を覚えておく必要があります。
新しいステータスを追加する必要がある場合は、すべてのステータス番号を更新する必要があります。

つまり、これも良い例ではありません。

3. 各ステータスの状態を作成します。

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

これも良い例ではありません。
すべてのステータス状態を関数内で常に管理する必要があります。

ステータスの更新を忘れるとバグになります。
リセット機能も非常に複雑です。

おすすめ

1. 文字列を使用してステータスを表現します。

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

これは非常に簡単な例です。
ステータスも簡単に把握できます。

新しいステータスを追加する必要がある場合、新しいステータスを簡単に追加できます。
もちろん、この例には短所もあります。
ロード中のステータスと成功ステータスを同時に表現することはできません。
しかし、これは大きな問題ではないと思いました。

そのため、react state でステータスを管理する場合は、文字列を使用してステータスを表現することをお勧めします。

結論

react stateでステータスを管理する場合は、文字列を使ってステータスを表現します。

これは非常にシンプルで理解しやすいです。
新しいステータスも簡単に追加できます。

オブジェクトまたはインデックスを使用してステータスを表現する場合、新しいステータスを追加するときにすべてのステータスを更新する必要があります。
そこで、ステータスを表す文字列を使用することをお勧めします。

お読みいただきありがとうございます。

以上がReact 状態管理の簡素化: ステータス処理のベスト プラクティスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。