Thunk?

✅thunk는 redux-toolkit에 내장된 기능이며, redux로 비동기적 작업을 처리할 때 사용된다.

createAsyncThunk

✅createAsyncThunk는 비동기 작업을 처리하는 액션을 만들어준다.

1. 액션 크리에이터 만들기

🟢코드확인

const 액션크리에이터 = createAsyncThunk(
	'액션타입/액션크리에이터`,	// 이 줄 자체가 액션타입이라 의미있게 작성해주면 됌
    asycn() => {		// 액션이 실행되었을때 처리할 작업
    	const resp = await fetch('url넣기')	// 서버에 접속
        const data = await resp.json();		// 결과를 가져옴
       	return data.value;					// 결과를 리턴받음
    }
)

2. extraReucers에 액션 크리에이터 3가지 상태 넣어주기

❗❗ reducers는 동기적이며, 액션크레에이터를 툴킷이 자동으로 만들어준다. 하지만 비동기 작업은 액션크리에이터를 자동으로 만들지 못하기 때문에, extraReducers안에서 정의한다.

• 액션크리에이터.pending
  비동기 작업을 시작했을 때 상태

• 액션크리에이터.fulfilled
  비동기 작업이 끝났을 때 상태(위 코드의 경우 data를 가져왔을 경우)

• 액션크리에이터.rejected
  오류가 생겨서 중단이 되었을 때

🟢코드확인

const 액션타입 = createSlice({
	name: '액션타입',
    initalState:{
    	value: 0,
        status: 'Welcom'
    },
    extraReducers: (매개변수) => {
    	매개변수.addCase(액션크리에이터.pending, (state,action) => {
        	state.status = 'Loading';
        })
        매개변수.addCase(액션크리에이터.fulfilled, (state.action) => {
        	state.value = action.payload;
            state.status = 'complete';
        })
        매개변수.addCase(액션크리에이터.rejected, (state,action) => {
        	state.status = 'fail';
        })
    }
});

3. 액션크리에이터 호출하기

각 addCase를 사용할 곳에 액션타입을 dispatch로 전달하고, useSelector로 보내준다.

🟢코드확인

function 함수명 () {
	const dispatch = useDispatch();	// 아래 이벤트에서 사용할 곳에서 호출
    const state = useSelector(state => {
    return state.액션명.status;
    });
    const 사용할value변수명 = useSelector(state => {
    return state.액션명.value;
    })
}

---

실행순서

-> 이벤트 발생 시 extraReduvers에서 pending이 useSelector로 먼저 전달
-> 이벤트 발생한 곳에 로딩 상태를 출력
-> 액션크리에이터에 AJAX작업을 함
-> AJAX작업이 끝나면 extraReduvers에서 fulfilled에 해당되는 reducer가 자동으로 호출됨
-> 액션크리에이터에서 전달한 값이 action.payload로 들어감
-> 이 값이 useSelector를 통해 전달됨
-> 이 과정에서 오류가 나게되면 rejected 출력!