Redux에서 Thunks 소개

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

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

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

jsxconst 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를 추가하기만 하면 됩니다:

products/productsSlice.jsimport { createSlice, nanoid, createAsyncThunk } from '@reduxjs/toolkit'

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

products/productsSlice.jsimport { client } from '../../api/client'

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

products/productsSlice.jsexport const fetchProducts = createAsyncThunk()

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

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