728x90
사용자에게 로딩이 진행되고 있다는 것을 보여주는 것은 중요하다. slice에서 addCase를 통해 정의된 로딩 상태에 따라 컴포넌트의 렌더링 여부를 결정하는 로직을 구현하였다. 위의 이미지에서 '재추천받기' 버튼을 눌렀을 때 '칵테일 추천 중..' 이라는 문구를 띄우고자 한다. 컴포넌트 return 값은 삼항연산자를 활용하여 조건부를 작성하였다. '칵테일 추천 중..' 문구는 status가 loading 단계일 때 잠깐 등장한다. 이내 status가 succeded되고 payload로 cocktailInfo가 업데이트되면 해당 state를 불러온다. cocktailInfo가 없는 경우(즉, status가 failed)이면 '연결 오류: 칵테일 정보 수신 불가' 메세지를 띄운다. 아래는 상세한 코드이다:
// [GetCocktail.tsx]
function GetCocktail({ weatherName }: GetCocktailProps) {
// 중략..
return (
<>
{status === 'loading' ? (
<div className={styles.loading}>칵테일 추천 중...🍸</div>
) : cocktailInfo ? (
<>
<h4 className={styles.cocktailName}>{cocktailInfo.strDrink}</h4>
<img
src={cocktailInfo.strDrinkThumb}
alt={cocktailInfo.strDrink}
className={styles.drinkImg}
/>
<MakeBtns
reloadCocktail={() => dispatch(fetchCocktail(weatherName))}
cocktailId={cocktailInfo.idDrink}
cocktailName={cocktailInfo.strDrink}
/>
</>
) : (
<div className={styles.loading}>연결 오류: 칵테일 정보 수신 불가</div>
)}
</>
);
// cocktailSlice.ts
// 중략..
const cocktailSlice = createSlice({
name: 'cocktail',
initialState,
reducers: {}, // 동기 작업
extraReducers: (builder) => {
// 비동기 작업
builder
.addCase(fetchCocktail.pending, (state) => {
state.status = 'loading';
})
.addCase(fetchCocktail.fulfilled, (state, action) => {
state.status = 'succeeded';
state.cocktailInfo = action.payload;
})
.addCase(fetchCocktail.rejected, (state) => {
state.status = 'failed';
});
},
});
728x90
반응형