[Redux-Toolkit] 2. thunk 비동기

공부한 내용 정리를 했다.

기존의 비동기 코드

<button onClick={ async () => {
    const resp = await fetch(‘https://~~~’);		// 1
    const data = await resp.json();
    dispatch(set(data.value));		// 2, 4
    // dispatch({ type: “counterSlice/set”, payload: data.value });		<= 3
}}>+ async fetch without thunk</button>

<div>{count} | {status}</div>	// 5

1. 서버로부터 데이터를 가져온다.
2. actionCreate함수 set을 주고 가져온 데이터는 data.value안에 담는다.
3. 그럼 action(객체)이 만들어진다.
4. dispatch로 보낸다.
5. count에 몇번 counting을 했는지 보여준다.

• 기존의 비동기 코드이다.
• 아무문제가 없지만, 직관적으로 보이는 코드들이 눈에 거슬린다.
• 동일한 비동기코드를 다른 곳에 쓴다면? 중복이 발생한다.

간결하게 바꿔보자

<button onClick={ () => {
    dispatch(asyncUpFetch());
}}>+ async thunk</button> 

• 함수에 하고자하는 action 작업을 만든 후, dispatch()했을 때 그 함수가 실행되도록 해보자.
  
  

createAsyncThunk()

⭐️ 비동기작업을 처리하는 action을 만들어준다.
( 만든 함수를 action creater라고 부른다. )

• 첫 번째 인자로 Type을 적는다.

• 두 번째 인자로 action 실행 되었을 때, 처리되는 작업을 적어준다.
  ( 서버접속, 결과가져오기, 결과를 return )

• 비동기 작업을 할 경우 3가지 상태

  • pending ( 대기 ) : 비동기 작업을 시작했을 때의 상태 ( Loading )
  • fulfilled ( 완료 ): 비동기 작업이 끝났을 때 ( 데이터를 가져왔을 때 )
    ( Done, complete .. )
  • rejected ( 오류 ) : 오류가 생겨서 중단되었을 때 ( 에러를 띄워 어떤 에러인지 확인 ) ( fail )

위 의 3가지 상태의 reducer가 필요하다.
createSlice()안에 ⭐️extraReducers⭐️를 사용한다.

ex)

const counterSlice = createSlice({
    name: ‘counter’,
    initialState: { 
	value: 0
	status: ‘Welcome’
    },
    /* 동기 */
    reducers: { … }

    /* 비동기 */
    extraReducers: (builder) => {
	builder.addCase(asyncUpFetch.pending, (state, action) => {
	    state.status = ‘Loading’;
	})
	builder.addCase(asyncUpFetch.fulfilled, (state, action) => {
	    state.value = action.payload;
	    state.status = ‘complete’;
	})
	builder.addCase(asyncUpFetch.rejected, (state, action) => {
	    state.status = ‘fail’;
	})
    }
});

• 3가지의 상태일 때의 reducer를 각 각 정의를 해준다.
• 모두 정의 하지 않아도되고, fulfilled에만 정의해도 된다.
• 좋은 점 : 상태에 따른 체계적인 정의 👍🏼

동기reducers vs 비동기extraReducers의 차이점

• reducers : action create를 자동으로 만들어준다.
• extraReducers : action create를 자동으로 만들어주지 못한다.

Thunk를 이용해 비동기 통신을 할 경우의 문제점

• api코드가 hook이나 소스에 녹아 분산되어 있어 관리하기가 번거롭다.
• Thunk로 비동기 통신을 하다보니 redux가 store보단 비동기통신을 하는 역할
  ( store가 비대해지자 역할을 어긋난것 )
• 비동기작업들은 디스패치하지 않고, react-query로 결과만 뿌려주는 식으로 사용

• 관리
  클라이언트 상태 👉🏻 Redux
  서버 상태 👉🏻 React-query

더 좋은 방법이 있을까 ?!
: redux-toolkit-query ?