React 5일차

useReducer 요청 상태에 따라 관리하기

// action : dispatch 함수로 받을 액션
const reducer = (state, action) => {
    switch(action.type) {
       case "INCREMENT :
          return state + 1 ;
       case "DECREMENT :
          return state - 1 ;
    }
}

// state : 현재 상태 값 => 변수
// dispatch : state 값을 업데이트 하고, 재 랜더링을 촉발하는 함수
const [ state, dispatch ] = useReducer( reducer , 0 );

return (
 <h3>  {state}  </h3> 
 <button onClick={() => {dispatch( {type:'INCREMENT'}) }}> + </button>
 <button onClick={() => {dispatch( {type:'DECREMENT'}) }}> - </button>
)

누르면 1씩 증감하는 Counter를 이런식으로 reducer을 이용해서 만들 수 있음

 

---

 

어제했던 User컴포넌트를 그대로 가져와서 reducer을 사용하는 방식으로 바꿔서 데이터를 가져오고 상태마다의 상황을 표시하기

 

action type : SUCCESS / ERROR / LOADIONG

import axios from 'axios';
import React, { useEffect, useReducer} from 'react';

function reducer(state, action){
    switch(action.type){
        case 'LOADING' : 
            return {
                loading : true,
                data : null,
                error : null
            };
        case 'SUCCESS' :
            return {
                loading : false,
                data : action.data,
                error : null
            };
        case 'ERROR' :
            return {
                loading : false,
                data : null,
                error : action.error
            };
        default : 
            throw new Error(`Unhandled action type : ${action.type}`);     
    }
}




const User2 = () => {

    const [ state , dispatch] = useReducer(reducer, {
        loading : false,
        data : null,
        error : null
    });


    const fetchUsers = async () => {
        try{
            // 요청이 시작되면 loding의 상태를 true로 변경
            dispatch({type: 'LOADING'});
            const response = await axios.get('https://jsonplaceholder.typicode.com/users');
            console.log(response);
            dispatch({type : 'SUCCESS', data: response.data}); 
           
        } catch(e){
            dispatch({type : 'ERROR', error : e});
        }  
    }

     useEffect(() => {
        fetchUsers();
    },[]);

    const { loading, data:users, error} = state; // state.data => users 키워드로 조회

    if(loading) return <div>로딩중...</div>;
    if(error) return <div>에러가 발생했습니다.</div>
    if(!users) return <div>User null!!!</div>

    return (
        <div className='user2'>
              <div className='user'>
            <div>User2.jsx 영역</div>

            <ul>
            {
                users.map(user => (
                    <li key={user.id}>{user.username} ({user.name}) : {user.email}</li>
                ))
            }
            </ul>
            <button onClick={fetchUsers}> 다시 불러오기 </button>
        </div>
        


        </div>
    );
};

export default User2;