인프런 커뮤니티 질문&답변

현재 loginSlice.tsx에서 오류가 나고 있습니다..

아래와 같은 메세지를 접했습니다.

useCustomLogin.tsx:2 Uncaught SyntaxError: The requested module '/src/store.tsx' does not provide an export named 'AppDispatch' (at useCustomLogin.tsx:2:10) 

어느부분을 손 봐야할까요?
vite 6.3버전으로 이용하고 있습니다.

loginSlice.tsx

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"
import { loginPost } from "../api/memberApi"
import { removeCookie, setCookie } from "../util/cookieUtil"

export interface LoginInfo {
   email:string,
   nickname:string,
   accessToken: string, 
   refreshToken: string,
   roleNames: string[],
   status: string
}

const initState:LoginInfo = {
   email: '',
   nickname: '',
   accessToken:'',
   refreshToken: '',
   roleNames: [],
   status: ''
}

export const loginPostAsync = createAsyncThunk('loginPostAsync', ({email, pw}: {email:string, pw:string}) => {
    console.log("---------------loginPostAsync---------------------")
    console.log(email, pw)
    return loginPost(email, pw)
})
  
  



const loginSlice = createSlice({
  name: 'loginSlice',
  initialState: initState,
  reducers: {

    save: (state, action) => {

      console.log("save...........")

      return action.payload

    },
    
    logout: (state, action) => {

      console.log("logout..........")

      removeCookie("member")
    }
  },
  extraReducers :(builder) => {
    builder.addCase(loginPostAsync.fulfilled , (state, action) => {

      console.log("loginPostAsync.fulfilled")

      const newState:LoginInfo = action.payload

      newState.status = 'fulfilled'

      setCookie("member", JSON.stringify(newState), 1) 

      return newState

    })
    .addCase(loginPostAsync.pending, (state, action) => {
      console.log("loginPostAsync.pending")
      state.status = 'pending'
    })

    .addCase(loginPostAsync.rejected, (state, action) => {
      console.log("loginPostAsync.rejected")
      state.status = 'rejected'
    })

  }
})

export const { save, logout} = loginSlice.actions

export default loginSlice.reducer

  

useCustoLogin.tsx

import { useDispatch, useSelector } from "react-redux"
import { AppDispatch, RootState } from "../store"
import { Navigate, useNavigate } from "react-router"
import { loginPostAsync, logout, save } from "../slices/loginSlice"
import { useEffect } from "react"
import { getCookie } from "../util/cookieUtil"


const useCustomLogin = () => {

  const dispatch = useDispatch<AppDispatch>()
  //로그인 상태 객체 
  const loginState = useSelector((state: RootState) => state.loginSlice)
 
  //로그인 여부 
  const loginStatus = loginState.status //fulfilled, pending, rejected

  useEffect(()=> {

    if(! loginStatus ) {

      const cookieData = getCookie("member")

      if(cookieData){
        dispatch(save(cookieData))
      }

    }

  }, [])

 
  const navigate = useNavigate()
 
  const doLogin = async (email:string, pw:string) => {
    dispatch(loginPostAsync({ email, pw }))
  }

  const doLogout = () => {
    dispatch(logout(null))
  }
  const moveToLogin = () => {
    navigate("/member/login")
  }
  const moveToLoginReturn = () => { //--------로그인 페이지로 이동 컴포넌트 
    return <Navigate replace to="/member/login"/>
  }
     
  const moveToPath = (path:string) => { //----------------페이지 이동 
    navigate({pathname: path}, {replace:true})
  }
    

  return {loginState, loginStatus, doLogin, doLogout,moveToLogin,moveToLoginReturn,moveToPath}

}

export default useCustomLogin

store.tsx

import { configureStore } from "@reduxjs/toolkit";
import loginSlice from "./slices/loginSlice";

const store = configureStore({
  reducer: {
    "loginSlice": loginSlice,
  }
})

export type AppDispatch = typeof store.dispatch

export type RootState = ReturnType<typeof store.getState>

export default store