Redux에서 Thunks 소개

이전 장에서 우리는 데이터 교환을 위해 서버, 데이터베이스 및 클라이언트 작업을 구성했습니다. 이제 우리의 '동기식'으로 구성된 Redux 애플리케이션이 비동기식 클라이언트와 상호 작용할 수 있도록 마지막 다리를 놓아야 합니다. 우리는 이전 장의 마지막 강의에서 생성한 이 클라이언트를 사용하여 요청을 보내고 응답에서 필요한 데이터를 받아올 것입니다.

이전 섹션의 첫 강의에서 기억하듯이, Redux는 비동기 로직 작업에 대해 알지 못하며 이를 위해 thunk 미들웨어를 사용할 것입니다. 이 미들웨어는 전송된 actions를 처리하고, thunk 코드에서 store의 dispatch 및 getState 메서드를 사용하며, dispatch 메서드가 일반 JS 객체뿐만 아니라 함수 및 프로미스와 같은 엔터티와도 작동하도록 도와줍니다.

일반적으로 thunk 함수는 dispatch와 getState (필요한 경우) 두 인수와 함께 호출되며, 이 함수 본문에서 사용할 수 있습니다. 이를 통해 일반 액션들을 전송할 수 있습니다. 또한 store.dispatch를 통해 전송할 수도 있습니다. 이러한 함수의 예는 아래에 나와 있습니다:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Old Color: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`New Color: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

이제 제품 애플리케이션을 열어봅시다. 애플리케이션 시작 시 서버로부터 받아야 할 첫 번째 것은 제품 목록입니다. 일반적으로 thunks는 슬라이스 파일에 작성되므로, productsSlice.js 파일을 열겠습니다.

기쁜 소식은 Redux Thunk 설치에 대해 고민할 필요가 없다는 것입니다. 왜냐하면 RTK의 configureStore 함수가 이미 이를 대신해 줄 것이기 때문입니다. 따라서 파일에서 import에 createAsyncThunk를 추가하기만 하면 됩니다:

import { createSlice, nanoid, createAsyncThunk } from '@reduxjs/toolkit'

클라이언트도 import에 추가합시다:

import { client } from '../../api/client'

이제 createAsyncThunk를 사용하여 제품을 가져오기 위한 첫 번째 thunk를 생성하겠습니다. initialState 객체 선언 바로 다음에 이 작업을 수행합시다:

export const fetchProducts = createAsyncThunk()

createAsyncThunk의 첫 번째 매개변수는 생성된 action의 유형에 대한 문자열을 받고, 두 번째 매개변수는 payload에 대한 콜백 함수로, 결과적으로 데이터나 오류가 있는 프로미스를 반환합니다 (client.js 파일 참조). 함수 코드에서 우리는 client.get을 호출하고 서버에 지정한 경로를 전달합니다 (server.js에서 http.get이 받는 매개변수 확인):

export const fetchProducts = createAsyncThunk(
	'products/fetchProducts',
	async () => {
		const response = await client.get('/fakeServer/products')
		return response.data
	}
)

학생 애플리케이션을 열으십시오. 여기서 studentsSlice.js 파일을 열으십시오. thunk 생성을 위해 createAsyncThunk 함수와 서버에 API 요청을 보내기 위한 client를 import 하십시오.

initialState 객체 선언 직후에 createAsyncThunk를 사용하여 학생 목록을 가져오기 위한 thunk fetchStudents를 생성하십시오. 이 thunk는 server.js 파일에 지정된 주소인 /fakeServer/students로 GET 요청을 보내고, 강의 자료에 표시된 대로 response.data를 반환해야 합니다. createAsyncThunk의 첫 번째 매개변수로 action 유형에 대한 문자열 students/fetchStudents를 지정하십시오.