Next.js | Redux-toolkit in Next.js( typescript ) | createAsyncThunk 비동기 API 관리

이전 포스트에서 Redux-toolkit을 이용하여 상태관리하는 법을 알아보았다.

이번 포스트에서는 createAsyncThunk로 비동기 API를 다루어보자.

 

1. 이전 포스트에서 함수를 추가한다.

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

// 인터페이스
export interface UserInterface {
    number : Number;
}


// state 초기값
const initialState: UserInterface = {
    number = 0;
}

// createAsuncThunk function
export const refreshList = createAsyncThunk(
    'user/refreshList',
    async (body: any, thunkAPI) => {
        console.log("body : ", body)
        try {
            const response = await axios.get('/api/user/', { params: { user__id: "teepo" } })
            return (await response.data)
        }
        catch (Err) {
            return thunkAPI.rejectWithValue(Err)
        }
    }
)

export const userSlice = createSlice({
    name: 'user',
    initialState,
    reducers: {
    },
    extraReducers: (builder) => {
    	// pending
    builder.addCase(refreshList.pending, (state, action) => {})
    	// fulfilled
        .addCase(refreshList.fulfilled, (state, action) => {})
		// rejected
        .addCase(refreshList.rejected, (state, action) => {})
    }
})

// 액션의 이름을 담아준다 ( CreateSlice 으로 선언한 액션은 생략 가능 !)
export const { } = userSlice.actions;

export default userSlice.reducer;

 

createAsyncThunk는 3가지의 상태값을 가진다. 각각의 상황에 맞게 로직을 구성해주면 된다.

• pending : 대기
• fulfilled : 이행
• rejected : 거부

 

컴포넌트에서의 사용은 다음과 같다.

 ...
 
import { useDispatch, useSelector } from "react-redux";
import { refreshList } from "../../../../store/reducers/user/userSlice";

 ...
 
 const userState = useSelector((state: RootState) => state.user)
 const userDispatch = useDispatch<AppDispatch>();
 
  ...
  
     useEffect(() => {
        refreshListHandler(firstRefreshBody(loginData.company_code, postNumber, 0));
        try {
            userDispatch(refreshList({ aa: "dd" })).then(({ payload }: any) => {
                console.log("222", payload)
            })
        }
        catch (err) {
            console.log(err)
        }
    }, []);

 

action 함수에 원하는 파라미터값을 전달하고 axios를 실행한 뒤 결과값을 다시 반환해주는 시스템이다.

 

구글링할 때 잘 안나왔는데 typescript에서 AsyncThunkAction 쪽에서 자꾸 then이 없다는 에러가 떴다.

useDispatch<AppDispatch>를 추가하니 에러가 사라졌다.