1.UseReducerとは

ステータス管理のHooks機能の1つを提供します!!
ステータス値を変更するロジックは、userReducerを使用して他の場所で処理できます.
さらに、ユーザReducerは、関数要素内のReduxをある程度代替することができる.

2.UseReducerの使用

以前のロケーションでuseStateに書き込まれた状態値をuseReducerで書きましょう.

useState코드: const [hello,setHello] = React.useState('Hello function component')
useReducer코드: const [hello,dispatch] = React.useReducer(reducer,'초기값')

const [변수명,dispatch] = React.useReducer(조건에 따라 변경시킬 내용을 담은 컴포넌트,'초기값')

userreducerコードを1つずつ分解すると
変数名:useStateと同じステータス値名
dispatch:条件を含むオブジェクト
条件に従って変更する内容を含む構成部品:例ではreduceとして指定しますが、任意の値を指定できます.
初期値:userStateと同様に、初期値の位置を設定します.
userStateはsetHelloを使用して新しい値をhelloに入れます.
userreducerはdispatchとreduce素子を使用します!
これだけ見ていると少し理解できないかもしれませんので、サンプルコードを見せてください.

3.ユーザーステータスコードとユーザーモニタコードの比較

USStateとuseReducerを使用して、次のコンポーネントを作成します.
1)初期値0
2)+1キーを押して1を増やす
3)-1キーを押して1を減らします.

1)使用✔userState

const Counter = ()=>{
    const [number,setNumber] = React.useState(0)

    const onUp = ()=>{
        setNumber((n)=>n+1)
    }

    const onDown = ()=>{
        setNumber((n)=>n-1)
    }

    return(
        <>
            <div>{number}</div>
            <button onClick={onUp}>+1</button>
            <button onClick={onDown}>-1</button>
        </>


    )
}

💻 結果

hooksのステータス値に数字が含まれているかどうかを確認できます.

2）✔UseReducerを使用する

const reducer = (number,action)=>{
    switch(action.type){
        case "Up":
            return number+1
        case "Down":
            return number-1
        default:
            return number
    }
}

const Counter = () =>{
    const [number,dispatch] = useReducer(reducer,0)

    const onUp = () =>{
        dispatch({type:'Up'})
    }
    const onDown = () =>{
        dispatch({type:'Down'})
    }
    return (
        <>
            <div>{number}</div>
            <button onClick={onUp}>+1</button>
            <button onClick={onDown}>-1</button>
        </>
    )
}

usereducerはdispatchオブジェクトでタイプを定義します.
reduceという素子では,switchとcaseを用いて,タイプによって値が変化すると決定した.

💻 結果

[ユーザモニタ](User Monitor)を使用すると、モニタに含まれる数値が表示されます.
「使用状態」との顕著な違いは、状態値の変化が他の素子によって制御されることである.
こんにちは!😊 私は公費支援で開発の勉強を始めた学生です!
もし私が提供した情報に間違いがあったら、メッセージを残してください.💚
私の文章を読んでくれてありがとう.🙇‍♀️