`Redux Toolkit`으로 회원가입 요청 처리하기 : createAsyncThunk

---

Redux Toolkit의 createAsyncThunk를 이용해 회원가입 요청의 흐름을 파악하기 위한 게시글

---

1. 회원가입 입력 창과 요청 흐름

• 사용자가 버튼을 클릭하면 onSubmit 함수가 호출되고, 입력된 값들이 백엔드로 전송

<form className='mt-6' onSubmit={handleSubmit(onSubmit)}>
   <input type="email" 
   - 사용자가 버튼을 클릭하면 onSubmit 함수가 호출되고, 입력된 값들이 백엔드로 전송{...register('email')} placeholder="이메일" />
   <input type="password" {...register('password')} placeholder="비밀번호" />
   <input type="text" {...register('name')} placeholder="이름" />
   <button type="submit">회원가입</button>
</form>

• onSubmit 함수는 입력된 데이터를 객체로 만든 후, Redux의 dispatch 함수를 사용해 백엔드 요청을 처리

const onSubmit = ({ email, password, name }) => {
   const body = {
      email,
      password,
      name,
      image: `https://via.placeholder.com/600x400?text=no+user+image`,
   };

   // 회원가입 액션을 디스패치하여 요청 실행
   dispatch(registerUser(body));

   // 폼 초기화
   reset();
};

• 이 함수는 사용자가 입력한 정보를 body 객체에 담아 백엔드에 전송
• 백엔드 요청에 대한 반환된 데이터를 Redux Store에 저장하기 위해 Redux Toolkit을 사용

---

2. createAsyncThunk를 이용한 비동기 요청 처리

• registerUser라는 Thunk 함수를 생성해 회원가입 요청을 처리

createAsyncThunk는 Redux에서 비동기 로직을 처리할 때 사용되는 유용한 함수

import { createAsyncThunk } from '@reduxjs/toolkit';
import axiosInstance from '../utils/axios';

// 회원가입 요청 Thunk 함수 생성
export const registerUser = createAsyncThunk(
   'user/registerUser', // 액션 타입
   async (body, thunkAPI) => {
      try {
         // 백엔드로 POST 요청
         const response = await axiosInstance.post(`/users/register`, body);
         return response.data; // 요청 성공 시, 반환된 데이터
      } catch (error) {
         console.error(error);
         // 요청 실패 시 에러 메시지 반환
         return thunkAPI.rejectWithValue(error.response.data || error.message);
      }
   }
);

• dispatch를 통해 호출된 registerUser 함수가 실행
• 백엔드에 회원가입 요청을 보냄

성공 시 : response.data를 반환
실패 시 : 에러 메시지를 Thunk의 rejectWithValue를 이용해 처리

---

3. 리덕스 스토어에 데이터 저장

• createAsyncThunk로 생성된 Thunk 함수는 Redux의 미들웨어로 동작

  요청 상황

  • 진행 중일 때는 pending 상태
  • 성공 시 fulfilled 상태
  • 실패 시 rejected 상태가 발생

이 상태들은 Redux의 리듀서에서 처리

// 리덕스 슬라이스 정의
const userSlice = createSlice({
   name: 'user',
   initialState,
   reducers: {},
   extraReducers: (builder) => {
      builder
         .addCase(registerUser.pending, (state) => {
            state.status = 'loading'; // 요청 중
         })
         .addCase(registerUser.fulfilled, (state, action) => {
            state.status = 'succeeded'; // 요청 성공
            state.user = action.payload; // 사용자 정보 저장
         })
         .addCase(registerUser.rejected, (state, action) => {
            state.status = 'failed'; // 요청 실패
            state.error = action.payload; // 에러 메시지 저장
         });
   },
});

---

흐름 요약

1. 사용자가 회원가입 폼에 정보를 입력하고 제출
2. onSubmit 함수에서 입력된 데이터를 dispatch(registerUser(body))로 전달
3. registerUser Thunk가 백엔드로 POST 요청을 보내고, 요청이 완료되면 Redux 스토어에 데이터를 저장
4. 요청이 진행 중일 때는 로딩 상태, 성공 시 사용자 정보 저장, 실패 시 에러 메시지 표시