[redux-toolkit] createAsyncThunk 콜백 파라미터에 2개 이상 인자 넘기기

 

 

회사에서 서버 데이터의 CRUD를 위해 Redux-toolkit을 사용해 볼 기회가 생겼다. Redux를 사용해 본 적이 있었기 때문에 구조를 익히는 데 큰 어려움은 없었지만 createAsyncThunk API를 사용하면서 파라미터에 여러 개의 인자가 넘겨지지 않는 문제에 직면했다. 인자를 1개만 넘길 때는 문제가 없었기 때문에 이 부분에 대해서 공식문서를 살펴보았다.

 

createAsyncThunk

 

createAsyncThunk는 string 타입의 리덕스 액션 타입과 프로미스를 반환하는 콜백함수를 파라미터로 받는 함수이다. createAsyncThunk는 1) 파라미터로 받은 액션 타입을 기반으로 프로미스 생명주기의 액션 타입을 생성하고, 2) 프로미스 콜백함수를 실행시켜 반환된 프로미스를 기반으로 액션을 디스패치하는 청크 액션 크리에이터를 반환한다.

 

에러를 발생시키는 간단한 예시 코드

 

간단하게 username과 password를 request params로 보내서 로그인하는 코드를 예시로 작성하였다.

 

// api.tsx

import axios from "axios";

export const api = axios.create({
    baseURL: 'https://www.example.com'
});

export const LoginAPI = (username, password) => {
    api.post("/api/login", {params: {
        username: username,
        password: password,
    }})
};

// account.tsx

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { LoginAPI } from "../../api/api";

const LoginThunk = createAsyncThunk(
    'fetch/login', 
    async (username, password) => {
        const response  = await LoginAPI(username, password);
        return response;
});

 

위에서 createAsyncThunk는 파라미터로 string 타입의 액션 타입과 프로미스를 반환하는 콜백함수를 받는다고 설명했다. account.tsx에서 createAsyncThunk의 파라미터에 첫 번째 인자로 'fetch/login' 이라는 액션 타입과 두 번째 인자로 username과 password를 파라미터로 받아서 LoginAPI에 넘겨주는 콜백함수를 작성했다. 언뜻 보기에는 문제가 없어 보이지만 실제로 이 상태로 api를 호출하면 에러가 발생한다.

 

에디터에서 LoginThunk의 콜백함수의 파라미터로 넘기는 username과 password를 자세히 살펴보면 두 인자의 타입이 다르다는 것을 알 수 있다.

 

username의 타입

password의 타입

두 번째 인자인 password의 타입이 알 수 없는 GetThunkAPI 라는 제네릭으로 선언되어 있다. 

 

공식문서를 살펴보면 createAsyncThunk는 string 타입의 액션 타입,  프로미스를 반환하는 payloadCreator 콜백함수, options 객체까지 3개의 파라미터를 받는다고 나와 있다. 

 

 

여기서 두 번째 파라미터인 payloadCreater 콜백 함수 또한 파라미터로 받을 수 있는 대상이 첫 번째는 arg, 두 번째는 thunkAPI로 정해져 있기 때문에 자동으로 위의 함수에서 두 번째 파라미터에 위치하고 있는 password를 thunkAPI로 인식하는 것이다. 

 

또한 첫 번째 파라미터로 받는 arg는 single value로, 하나의 값만 넘길 수 있다고 설명하고 있다.

 

 

그렇다면 2개 이상의 인자를 어떻게 넘길 수 있을까?

 

2개 이상의 인자를 넘기는 방법

 

방법은 짱 간단하다.

single value로 인식할 수 있게끔 객체로 묶어주면 된다.

 

다만 각각의 인자들을 객체로 묶어줄 때는 타입을 선언해줘야 한다. 타입을 선언해주지 않으면 아래와 같이 타입 에러를 발생 시킨다.

 

 

로그인 폼과 관련된 key들의 타입을 아래와 같이 지정하고,

 

// auth-types.tsx

export interface LoginType {
    username: string;
    password: string;
}

 

객체로 묶은 인자에 타입을 선언해주면 password도 인자로 넘기는 string으로 잘 인식함과 동시에 타입 에러가 사라지는 걸 볼 수 있다!