Thunk 2

thunk에서 Promise 다루기

 

extraReducers

 

extraReducers란 reducer에서 바로 구현되지 않는 기타 Reducer 로직을 구현할 때 사용하는 기능이다.

보통 thunk 함수를 사용할 때 extraReducers를 사용한다.

 

이때 통신 진행중,실패,성공에 대한 케이스를 모두 상태로 관리하는 로직을 구현한다.

서버와의 통신은 100% 성공하는 것이므로 각 경우에 맞게 서비스가 어떻게 동작할지 정해주어야 한다.

 

pending, fullfilled, rejected로 나눌 수 있다.

우리가 thunk 함수에서 thunkApI.fulfillWithValue(data.data)라고 작성하면 fulfilled로 디스패치 된다.

action을 콘솔에 찍어보면 fullWithValue(data.data)가 보낸 액션 객체를 볼 수 있다.

(type과 payload가 있음.)

 

fullfillWithValue

 

fullfillWithValue 는 툴킷에서 제공하는 API이다.

Promise에서 resolve 된 경우, 즉 네트워크 요청이 성공한 경우에 dispatch 해주는 기능을 가진 API이다.

그리고 인자로는 payload등을 넣어줄 수 있다.

 

rejectWithValue

 

rejectWithValue도 툴킷에서 제공하는 API 이다.

Promise가 reject된 경우, 네트워크 요청이 실패한 경우 dispatch 해주는 기능을 가진 API이다.

마찬가지로 인자안에 값을 넣어줄 수 있다. ( ex- catch에서 잡아주는 error 객체)

 

 정리

 

• thunk 함수는 Reducers 아닌 외부에서 작성한 것 이므로, extraReducers 를 사용해야 한다.
• thunkAPI를 이용해서 Promise를 다룰 수 있다.
• 서버에서 가져오는 데이터는 로딩상태, 성공, 실패로 나누어서 상태를 관리하고, 컴포넌트 단에서도 이에 따라 다르게 조건부 렌더링을 한다.