codestates / codestates/M4M

[Guide] Redux Persist_Login State 관리 사용 가이드

Open
#112 0 comments 0 reactions 1 assignee Claimed by @magababo View on GitHub
guide
Dominant language
JavaScript
Stars
0
Forks
0
PR merge metrics
No merged PRs in 30d

Description

### Redux Persist_Login State 관리 사용 가이드 안내
⚠️ M4M에 적용된 Redux Pesrsist는 browser localStorage에 있는 값을 상태값으로 저장하고 있습니다.

1. Login State를 사용하고 싶은 file로 이동한다.
2. 아래와 같은 내용을 import 한다.
```js
import { useSelector } from 'react-redux';
```
3. component function 안에 useSelector를 이용해, token을 불러온다.
```js
function example () {
const isLogin = useSelector((state) => state.userReducer).token;
return ( ... )
}
```
4. isLogin(혹은 원하는 변수 명)으로, 로그인 유무를 확인한다. 아래는 예시이다.
```js
{!isLogin ? (

signup

) : (

mypage

)}
```
5. (번외) .token은 해당 user의 localStorage에 저장된 token값을 가져온다.
만약, userInfo(birthYear, email, kakao, nickname)을 확인하고 싶다면, 아래와 같이 불러와 사용한다.
```js
function example () {
const userInfo = useSelector((state) => state.userReducer).userInfo;
return ( ... )
}
```
![image](https://user-images.githubusercontent.com/39267361/135248549-fe0229f1-b95b-4cc9-9e0a-268d2b26e278.png)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.