[Redux] 비동기 상태처리를 위한 redux-toolkit 분석 및 탐구

• Redux-toolkit은 기존의 Redux에서 비동기 처리와 관련된 불편함을 해결해주는 도구로, 액션을 일일이 정의할 필요 없이 createAsyncThunk를 사용해 필요한 액션 생성자를 만들 수 있다. 또한, 비동기 처리도 자동으로 props로 전달해주는 방식을 제공한다.

• Redux-toolkit의 사용법은 createAsyncThunk를 import하여 인자를 넣으면서 호출하면 필요한 액션 생성자를 만들 수 있고, createSlice에 들어가는 객체의 extraReducers 부분에 자동으로 인자로 보내지는 builder 객체를 사용하여 거기에 있는 addCase 메서드를 호출해 해당 async 함수가 실행됨으로 인해 부수적으로 이루어지는 작업을 처리할 수 있다.

• createAsyncThunk의 첫번째 인자는 액션타입으로, dispatch로 해당 비동기 함수 액션생성자가 전달되면 "pending액션" => "fulfiled액션 or rejected액션" 순으로 자동으로 디스패치한다. 두번째 인자는 페이로드 생성자로, Promise 객체를 리턴하는 함수가 들어가며, 이 함수의 인자로는 컴포넌트상에서 처음으로 dispatch로 비동기 작업 액션을 생성할 때 보내지는 인자와 thunkAPI가 있다.

• thunkAPI는 dispatch, getState, extra 등의 값들을 포함하고 있다. dispatch는 함수 몸체에서 무언가 작업을 한 후, 특정 액션을 또다시 dispatch할 필요성이 있을 경우 사용하며, getState는 함수 몸체에서 특정 작업을 할 때에, 현재 store의 상태를 조회해서 진행해야 할 필요성이 있을 경우 사용한다.