firebase google login 기능 구현중 로그인 상태를 redux로 관리하려는데 useDispatch 훅 코드에서 오류가 납니다.
firebaseAuth.js
import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
import auth from './firebaseConfig';
import { useDispatch } from "react-redux"
import { setIsLogin } from '../store';
const provider = new GoogleAuthProvider();
// 로그인
export const signInWithGoogle = () => {
signInWithPopup(auth, provider)
.then((result) => {
useDispatch(setIsLogin()); <---------------- 여기부분입니다!
or
const dispatch = useDispatch(); <-----------------
dispatch(setIsLogin());
// console.log(result);
const name = result.user.displayName;
const email = result.user.email;
const profilePic = result.user.photoURL;
localStorage.setItem("name", name);
localStorage.setItem("email", email);
localStorage.setItem("profilePic", profilePic);
})
.catch((error) => {
console.log(error);
});
}
// 로그아웃
export const signOut = () => {
auth.signOut()
.then((result) => {
여기서의 상태변경은 보류중입니당
localStorage.removeItem("name");
localStorage.removeItem("email");
localStorage.removeItem("profilePic");
})
}
REDUX부분입니다!
store.js
let isLogin = createSlice({
name : 'isLogin',
initialState : false,
reducers : {
setIsLogin(state) {
state = !state
}
}
});
export let { setIsLogin } = isLogin.actions;
함수 밖으로 옮겨서 사용하면 React Hook "useDispatch" cannot be called at the top level. 이런 오류가 뜹니당
코드를 어떻게 바꿔줘야 할까요
