리엑트 블로그 만들기 12 - Loading 만들기
리엑트 블로그 만들기 15 - Post Card List 만들기 2 리엑트 블로그 만들기 14 - Post Card List 만들기 리엑트 블로그 만들기 13 - 라우트 리엑트 블로그 만들기 12 - Loading 만들기 리엑트 블로그 만들기 11 - 회원가입 리덕스 작업 리엑트 블로그 만들기 10 - 회원가입 2 리엑트 블로그 만들기 9 - 회원가입 리엑트 블로그 만들기 8 - 로그인 & 로그아웃 리엑트 블로그 만들기 7 - Login Modal 만들기 2 리엑트 블로그 만들기 6 - Login Modal 만들기 1 리엑트 블로그 만들기 5 - 리덕스 세팅하기 리엑트 블로그 만들기 4 - Navbar 작성하기 리엑트 블로그 만들기 3 - Header 작성하기 리엑트 블로그 만들기 2 - Footer 작성하기 리엑트 블로그 만들기 1 - 초기 setting 하기 리엑트 블로그 만들기 12 - Loading 만들기// USER LOADINGexport const USER_LOADING_REQUEST = "USER_LOADING_REQUEST"export const USER_LOADING_SUCCESS = "USER_LOADING_SUCCESS"export const USER_LOADING_FAILURE = "USER_LOADING_FAILURE" const authReducer = (state = initialState, action) => { switch (action.type) { case REGISTER_REQUEST: case LOGIN_REQUEST: case LOGOUT_REQUEST: return { ...state, errorMsg: "", isLoading: true } case REGISTER_SUCCESS: case LOGIN_SUCCESS: localStorage.setItem("token", action.payload.token) return { ...state, ...action.payload, isAuthenticated: true, isLoading: false, userId: action.payload.user.userId, userRole: action.payload.user.role, errorMsg: "" } case REGISTER_FAILURE: case LOGOUT_FAILURE: case LOGIN_FAILURE: localStorage.removeItem("token") return { ...state, ...action.payload, token: null, user: null, userId: null, isAuthenticated: false, isLoading: false, userRole: null, errorMsg: action.payload.user.role } case LOGOUT_SUCCESS: localStorage.removeItem("token") return { token: null, user: null, userId: null, isAuthenticated: false, isLoading: false, userRole: null, errorMsg: "" }; case CLEAR_ERROR_REQUEST: return { ...state, errorMsg: null, } case CLEAR_ERROR_SUCCESS: return { ...state, errorMsg: null, } case CLEAR_ERROR_FAILURE: return { ...state, errorMsg: null } case USER_LOADING_REQUEST: return { ...state, isLoading: true } case USER_LOADING_SUCCESS: return { ...state, isAuthenticated: true, isLoading: false, user: action.payload, userId: action.payload._id, userName: action.payload.userName, userRole: action.payload.role } case USER_LOADING_FAILURE: return { ...state, user: null, isAuthenticated: false, isLoading: false, userRole: "", } default: return state; }} // User Loadingconst userLoadingAPI = (token) => { console.log(token); const config = { headers: { "Content-Type": "applicatio n/json", }, }; if (token) { config.headers["x-auth-token"] = token; } return axios.get("api/auth/user", config);}function* userLoading(action) { try { console.log(action, "userLoading") const result = yield call(userLoadingAPI, action.payload) console.log(result) yield put({ type: USER_LOADING_SUCCESS, payload: result.data, }); } catch (e) { yield put({ type: USER_LOADING_FAILURE, payload: e.response }) }} // Clear Errorfunction* clearError() { try { yield put({ type: CLEAR_ERROR_SUCCESS, }); } catch (e) { yield put({ type: CLEAR_ERROR_FAILURE, }); }}function* watchClearError() { yield takeEvery(CLEAR_ERROR_REQUEST, clearError);} export default function* authSaga() { yield all([ fork(watchLoginUser), fork(watchLogoutUser), fork(watchUserLoading), fork(watchRegisterUser), fork(watchClearError), ]);} import { USER_LOADING_REQUEST } from '../../redux/types';import store from '../../store';const laodUser = () => { try { store.dispatch({ type: USER_LOADING_REQUEST, payload: localStorage.getItem("token"), }); } catch (e) { console.log(e); }}export default laodUser; import React from 'react';import ReactDOM from 'react-dom';import App from './App';import loadUser from './components/auth/loadUser';import './index.css';import reportWebVitals from './reportWebVitals';// 로그인을 항상 유지loadUser();ReactDOM.render( <App />, document.getElementById('root'));// If you want to start measuring performance in your app, pass a function// to log results (for example: reportWebVitals(console.log))// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitalsreportWebVitals();