part 4

package.json

@@ -18,30 +18,30 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.2",
-    "@reduxjs/toolkit": "^1.8.1",
+    "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.0.1",
+    "react-redux": "^8.0.5",
     "react-router-dom": "^6.11.2"
   },
   "devDependencies": {
-    "@testing-library/dom": "^9.2.0",
-    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/dom": "^9.3.0",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.2.5",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
-    "@types/testing-library__jest-dom": "^5.14.5",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/react": "^18.2.7",
+    "@types/react-dom": "^18.2.4",
+    "@types/testing-library__jest-dom": "^5.14.6",
     "@vitejs/plugin-react": "^4.0.0",
-    "eslint": "^8.0.0",
+    "eslint": "^8.41.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "jsdom": "^21.1.0",
-    "prettier": "^2.7.1",
-    "prettier-config-nick": "^1.0.2",
-    "typescript": "^5.0.2",
-    "vite": "^4.0.0",
+    "jsdom": "^21.1.2",
+    "prettier": "^2.8.8",
+    "prettier-config-nick": "^1.0.8",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.9",
     "vitest": "^0.30.1"
   },
   "eslintConfig": {

src/common/index.ts

@@ -0,0 +1 @@
+export * from "./utils"

src/common/utils/create-app-async-thunk.ts

@@ -0,0 +1,8 @@
+import { createAsyncThunk } from "@reduxjs/toolkit"
+import { AppDispatch, RootState } from "@/app/store"
+
+export const createAppAsyncThunk = createAsyncThunk.withTypes<{
+  state: RootState
+  dispatch: AppDispatch
+  rejectValue: unknown
+}>()

src/common/utils/index.ts

@@ -0,0 +1 @@
+export * from "./create-app-async-thunk"

src/features/auth/auth.slice.ts

@@ -1,44 +1,58 @@
-import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit"
+import { createSlice, PayloadAction } from "@reduxjs/toolkit"
 import {
   AuthApi,
   LoginArgs,
   RegisterArgs,
   User,
 } from "@/features/auth/auth.api"
+import { createAppAsyncThunk } from "@/common"
 
-const register = createAsyncThunk("auth/register", (arg: RegisterArgs) => {
-  AuthApi.register(arg)
-    .then((res) => {
-      console.log(res)
-    })
-    .catch((res) => {
-      console.error(res)
-    })
-})
+const THUNK_PREFIXES = {
+  REGISTER: "auth/register",
+}
 
-const login = createAsyncThunk("auth/login", async (arg: LoginArgs) => {
-  try {
+const register = createAppAsyncThunk<any, RegisterArgs>(
+  THUNK_PREFIXES.REGISTER,
+  (arg) => {
+    AuthApi.register(arg)
+      .then((res) => {
+        console.log(res)
+      })
+      .catch((res) => {
+        console.error(res)
+      })
+  },
+)
+
+const login = createAppAsyncThunk<{ user: User }, LoginArgs>(
+  "auth/login",
+  async (arg) => {
     const res = await AuthApi.login(arg)
     return { user: res.data }
-  } catch (e) {
-    console.error(e)
-  }
-})
+  },
+)
 
 const slice = createSlice({
   name: "auth",
-  initialState: { user: null as User | null },
+  initialState: { user: null as User | null, isLoading: false },
   reducers: {
     setUser: (state, action: PayloadAction<{ user: User }>) => {
       state.user = action.payload.user
     },
   },
   extraReducers: (builder) => {
+    builder.addCase(login.pending, (state) => {
+      state.isLoading = true
+    })
     builder.addCase(login.fulfilled, (state, action) => {
       if (action.payload?.user) {
         state.user = action.payload.user
+        state.isLoading = false
       }
     })
+    builder.addCase(login.rejected, (state) => {
+      state.isLoading = false
+    })
   },
 })