ステータスの複数の状態を使用する

を使用してAPIデータを取得する場合fetch ユーザーを更新する方法や条件付きのコードを実行する方法があります.これは一般に、異なる状態の選択を使用することを意味する.これは潜在的に厄介な複雑なことができます.
次のようなことができます.

const [data, setData] = useStatus([])
const [success, setSuccess] = useState('')
const [loading, setLoading] = useState('')
const [rejected, setRejected] = useState('')
const [error, setError] = useState('')

これは次のようになります.

useEffect(() => {

    setLoading('loading') // state 1

    fetch('http://some-api-url')
    .then(response => {
        setData(response)
        setSuccess('success') // state 2
    })
    .catch(err => {
        setError(err)
        setRejected('rejected') // state 3
    })

}, [])

上記で、我々は管理して、目を保つために、3つの州を持ちます.それが条件付きでそれを使用することになるとき、それはASAの痛みであるでしょう.

if (success === 'success') {
    //do something
} else if ( loading === 'loading' ) {
    // do something
} else if (rejected === 'rejected') {
    // do something
}

今では、使いやすくなりませんstatus 他の3つの状態を心配するのではなく、状態.我々は何かを含めることができますconst [status, setStatus] = useStatus('idle') そして他のすべての状態をsetData and setError エラーメッセージの表示を処理できるように、エラー状態が必要です.
だから今では、はるかにきれいで管理するために簡単になる次のとおりです.

const [data, setData] = useStatus([])
const [error, setError] = useState('')
const [status, setStatus] = useState('idle')

useEffect(() => {

    setStatus('loading')

    fetch('http://some-api-url')
    .then(response => {
        setData(response)
        setStatus('success')
    })
    .catch(err => {
        setError(err)
        setStatus('rejected')
    })

}, [])

if (status === 'success') {
    // do something
} else if ( status === 'loading' ) {
    // do something
} else if (status === 'rejected') {
    // do something
}

私にとって、これははるかにきれいな方法をすることです、私はそれが複数の州を使用することとそれほど異なるということを知っています.しかし、我々は3つの代わりに対処する1つの状態があります.
私は、ケントCドッドによってこのようにするためにインスピレーションを得ました.詳細情報here