비동기적인 작업을 리덕스로 처리할 때 사용하는 도구
비동기 작업을 처리하는 action creator을 생성
const asyncAPI = createAsyncThunk(
'타입',
async () => {
const data = await fetch('API주소').json();
return data;
}
)
비동기 작업과 관련된 세 가지의 상태
해당 상태별로 reducer가 필요
thunk는 각각의 상태에 따른 reudcer을 체계적으로 작성할 수 있도록 유도
const dataSlice = createSlice({
name: 'dataSlice',
initialState: { answer: '', image: '' },
extraReducers: (builder) => {
builder.addCase(asyncAPI.pending,(state, action)=>{
// 대기 상태일 때
});
builder.addCase(asyncAPI.fulfilled, (state, action) => {
// 완료 상태일 때
state.answer = action.payload.answer;
state.image = action.payload.image;
});
builder.addCase(asyncAPI.rejected, (state, action) => {
// 오류 상태일 때
});
},
});
// 모두 정의할 필요는 없고 fulfilled만 정의해도 상관 없음
function App() {
const dispatch = useDispatch();
const answer = useSelector((state) => {
return state.data.answer;
});
const urlImg = useSelector((state) => {
return state.data.image;
});
const getData = async () => {
dispatch(asyncAPI());
};
return (
...
);
}