[gproro-shop-app]리덕스로 로그인 , 회원가입 준비하기

 

❓왜 로그인, 회원가입을 리덕스로 해야하나

• 앱 전반에서 인증 상태와 사용자 정보를 일관되게 관리할 수 있기 때문

이렇게 store 폴더안에 폴더파일들을 미리 다 만들어준다.

 

1. 스토어 생성

configureStore함수를 이용해서 생성해준다.

store 폴더 바로아래의 index.js에서

import  {configureStore} from "@reduxjs/toolkit";

import { userSlice } from "./user/user.slice";

export const store = configureStore({

    reducer:{

        userSlice

    }

})

 

리듀서를 만들어야하는데 그래서 슬라이스를 하나 만들어보자 

 

1-2. 슬라이스

 

import { createSlice } from "@reduxjs/toolkit";

const initialState = localStorage.getItem("user")

  ? JSON.parse(localStorage.getItem("user"))

  : { email: "", token: "", id: "" };

   // user가 있다면 JSON형식으로 파싱해서 상태설정

export const userSlice = createSlice({

  name: "user",

  initialState,

  reducers: {

    setUser: (state, action) => {

      state.email = action.payload.email;

      state.token = action.payload.token;

      state.id = action.payload.id;

      localStorage.setItem("user", JSON.stringify(state));

    },

    removeUser: (state) => {

      state.email = "";

      state.token = "";

      state.id = "";

      localStorage.setItem("user", JSON.stringify(state));

    },

  },

});

export const { setUser, removeUser } = userSlice.actions;

export default userSlice.reducer;

 

❓action.payload는 뭐지

• action.payload는 Redux에서 액션이 전달하는 데이터를 의미한다. 
•  action.payload는 dispatch할 때 넘겨받은 데이터이다.

예를 들어, dispatch(setUsers({ email: "example@example.com", token: "abcd1234", id: "user123" }))라고 호출하면,

{ email: "example@example.com", token: "abcd1234", id: "user123" }가 action.payload로 전달된다.

 

❓ 슬라이스와 리듀서는 무엇

• 슬라이스: Redux에서 특정 기능에 관한 상태와 그 상태를 업데이트하는 리듀서를 하나로 묶은 것입니다. createSlice로 만들 수 있고, 이 안에 초기 상태, 리듀서 함수, 액션을 정의합니다. 슬라이스는 큰 상태를 여러 조각으로 나누어 관리할 수 있게 해준다.
• 리듀서: 상태를 변경하는 함수 액션을 받아서 그에 따라 새로운 상태를 반환합니다. 리듀서는 순수 함수여야 하며, 주어진 state와 action에 따라 상태를 변경하는 규칙을 정의합니다. createSlice 안에 정의된 함수들이 리듀서라고 볼 수 있다.

그래서 마저 store를 만들어준 다음에 프로바이더로 감싸줘야한다.

2. 프로바이더

import React from 'react'

import ReactDOM from 'react-dom/client'

import App from './App.jsx'

import '../src/global.scss'

import { Provider } from 'react-redux'

import { store } from './store/index.js'

ReactDOM.createRoot(document.getElementById('root')).render(

  <Provider store={store}>

    <App />

  </Provider>,

)

 

Provider 사용하려면 npm install react-redux를 설치해준다.

생성한 스토어도 넣어준다.

 

 

3. SignIn Component

import React, { useState } from 'react'

import Form from '../../../components/form/Form'

import { useNavigate } from 'react-router-dom'

import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';

import app from '../../../firebase';

import { useDispatch } from 'react-redux';

import { setUser } from '../../../store/user/user.slice';

const SignIn = () => {

  const navigate = useNavigate();

  const[firebaseError,setFirebaseError]= useState("");

 

  const auth = getAuth(app);

  const dispatch = useDispatch();

    //💥dispatch를 가져온다.

 

  const handleLogin = (email,password) =>{

    signInWithEmailAndPassword(auth,email,password)

      // 💥 handleLogin함수는 email과 password를 받아 firebase의 signinwithemailandpassword로 인증을 시도함

    .then(userCredential =>{

        //리덕스 스토어에 담는 로직

      dispatch(setUser({

        email:userCredential.user.email,

        token:userCredential.user.refreshToken,

        id: userCredential.user.uid,\

       //💥성공시 userCredential로부터 로그인된 사용자정보자겨와 setUser에 전달하고 redux 상태저장

      }))

      navigate('/')

    })

    .catch(error =>{

        return error && setFirebaseError("이메일 비번 잘못됨");

      })

    }

  return (

   <Form title={"로그인"}

  getDataForm={handleLogin}

  firebaseError={firebaseError}/>

  )

}

export default SignIn;

 

 

4.SignUp Component

import React, { useState } from 'react';

import { useNavigate } from 'react-router-dom';

import Form from '../../../components/form/Form';

import { createUserWithEmailAndPassword, getAuth } from 'firebase/auth';

import app from '../../../firebase';

import { useDispatch } from 'react-redux';

import { setUser } from '../../../store/user/user.slice';

const SignUp = () => {

  const navigate = useNavigate();

  const [firebaseError, setFirebaseError] = useState("");

 

  const auth = getAuth(app);

  const dispatch = useDispatch();

  const handleSignupAndLogin = (email, password) => {

    createUserWithEmailAndPassword(auth, email, password)

      .then((userCredential) => {

        dispatch(setUser({

          email:userCredential.user.email,

          token:userCredential.user.refreshToken,

          id: userCredential.user.uid

        }))

       

        navigate('/');

      })

      .catch(error => {

        console.log(error);

        return error && setFirebaseError("이메일 또는 비밀번호가 잘못되었습니다.");

      })

  }

  return (

    <Form

      title={"가입하기"}

      getDataForm={handleSignupAndLogin}

      firebaseError={firebaseError}

    />

  );

};

export default SignUp;

 

 

 

이렇게하면 리덕스 스토어 에 유저 정보가 잘 들어온것을 확인할 수 있다.