React 상태 관리 단순화: 상태 처리 모범 사례-JS 튜토리얼-php.cn

React 상태 관리 단순화: 상태 처리 모범 사례

王林

풀어 주다： 2024-09-10 11:04:07

원래의

597명이 탐색했습니다.

Simplify React State Management: Best Practices for Handling Status

가끔은 리액트 상태에서 상태를 관리해야 할 때가 있습니다.
예를 들어 제출 양식이 있는데 양식의 상태를 관리해야 합니다.

상태를 표현하는 방법은 다양합니다.
상태를 표현하기 위해 나쁜 예를 소개하겠습니다.

나쁜 예

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

로그인 후 복사

상태가 매우 복잡하기 때문에 이는 나쁜 예입니다.
상태를 업데이트할 때에는 상태를 모두 업데이트해야 합니다.

이 예에는 세 가지 상태 패턴만 있습니다.

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

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

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

로그인 후 복사

그런데 상태를 표현하기 위해 객체를 사용하면 독자는 세 가지 패턴만 있다는 것을 이해할 수 없습니다.
그래서 이것은 나쁜 예입니다.

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

로그인 후 복사

이것도 좋은 예는 아닙니다.
함수 내에서 모든 상태를 항상 관리해야 합니다.

그리고 상태 업데이트를 잊어버리면 버그가 됩니다.
재설정 기능도 매우 복잡합니다.

추천

문자열을 사용하여 상태를 표현합니다.

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

로그인 후 복사

아주 간단한 예입니다.
그리고 상태를 쉽게 이해할 수 있습니다.

새 상태를 추가해야 할 경우, 쉽게 새 상태를 추가할 수 있습니다.
물론 이 예에는 단점도 있습니다.
로딩상태와 성공상태를 동시에 표현할 수는 없습니다.
하지만 이건 큰 문제가 아니라고 생각했어요.

그래서 리액트 상태에서 상태를 관리한다면 문자열을 이용해 상태를 표현하는 것을 추천드립니다.