인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

Inflearn Community Q&A

김주호's profile image
김주호

asked

[Renewal] Creating NodeBird SNS with React

Write a post, comment saga

사가 부분 계속 확인했는데도 로그인이 안됩니다. ㅠ

Written on

·

233

0

```sagas/user.ts
import axios from "axios";
import { all, delay, fork, put, takeLatest } from "redux-saga/effects";
import {
  LOG_IN_FAILURE,
  LOG_IN_REQUEST,
  LOG_IN_SUCCESS,
  LOG_OUT_FAILURE,
  LOG_OUT_REQUEST,
  LOG_OUT_SUCCESS,
  SIGN_UP_FAILURE,
  SIGN_UP_REQUEST,
  SIGN_UP_SUCCESS,
} from "../reducers/user";

function loginAPI(data: any) {
  return axios.post("/api/login", data);
}

function* logIn(action: any) {
  try {
    yield delay(1000);
    yield put({
      type: LOG_IN_SUCCESS,
      data: action.data,
    });
  } catch (error: any) {
    yield put({
      type: LOG_IN_FAILURE,
      error: error.response.data,
    });
  }
}

function logoutAPI() {
  return axios.post("/api/login");
}

function* logOut() {
  try {
    yield delay(1000);
    yield put({
      type: LOG_OUT_SUCCESS,
    });
  } catch (error: any) {
    yield put({
      type: LOG_OUT_FAILURE,
      error: error.response.data,
    });
  }
}

function signUpAPI() {
  return axios.post("/api/signUp");
}

function* signUp() {
  try {
    yield delay(1000);
    yield put({
      type: SIGN_UP_SUCCESS,
    });
  } catch (error: any) {
    yield put({
      type: SIGN_UP_FAILURE,
      error: error.response.data,
    });
  }
}

function* watchLogin() {
  console.log("사가로그인 리스너 ");

  yield takeLatest(LOG_IN_REQUEST, logIn);
}

function* watchLogOut() {
  yield takeLatest(LOG_OUT_REQUEST, logOut);
}

function* watchSignUp() {
  yield takeLatest(SIGN_UP_REQUEST, signUp);
}

export default function* userSaga() {
  yield all([fork(watchLogin), fork(watchLogOut), fork(watchSignUp)]);
}


```

 

 

```sagas/index.ts
import { all, fork } from "redux-saga/effects";
import postSaga from "./post";
import userSaga from "./user";

export default function* rootSaga() {
  yield all([fork(postSaga), fork(userSaga)]);
}
```

 

```reducers/user.ts

export const initialState = {
  logInLoading: false,
  logInDone: false,
  logInError: null,

  logOutLoading: false,
  logOutDone: false,
  logOutError: null,

  signUpLoading: false,
  signUpDone: false,
  signUpError: null,

  changeNicknameLoading: false,
  changeNicknameDone: false,
  changeNicknameError: null,

  me: null,
  signUpData: {},
  loginData: {},
};

export const LOG_IN_REQUEST = "LOG_IN_REQUEST";
export const LOG_IN_SUCCESS = "LOG_IN_SUCCESS";
export const LOG_IN_FAILURE = "LOG_IN_FAILURE";

export const LOG_OUT_REQUEST = "LOG_OUT_REQUEST";
export const LOG_OUT_SUCCESS = "LOG_OUT_SUCCESS";
export const LOG_OUT_FAILURE = "LOG_OUT_FAILURE";

export const SIGN_UP_REQUEST = "SIGN_UP_REQUEST";
export const SIGN_UP_SUCCESS = "SIGN_UP_SUCCESS";
export const SIGN_UP_FAILURE = "SIGN_UP_FAILURE";

export const CHANGE_NICKNAME_REQUEST = "CHANGE_NICKNAME_REQUEST";
export const CHANGE_NICKNAME_SUCCESS = "CHANGE_NICKNAME_SUCCESS";
export const CHANGE_NICKNAME_FAILURE = "CHANGE_NICKNAME_FAILURE";

export const FOLLOW_REQUEST = "FOLLOW_REQUEST";
export const FOLLOW_SUCCESS = "FOLLOW_SUCCESS";
export const FOLLOW_FAILURE = "FOLLOW_FAILURE";

export const UNFOLLOW_REQUEST = "UNFOLLOW_REQUEST";
export const UNFOLLOW_SUCCESS = "UNFOLLOW_SUCCESS";
export const UNFOLLOW_FAILURE = "UNFOLLOW_FAILURE";

const dummyUser = (data: any) => ({
  ...data,
  nickname: "GIYEON",
  id: 1,
  Posts: [],
  Followings: [],
  Followers: [],
});

//action
export const loginRequestAction = (data: any) => {
  return {
    type: LOG_IN_REQUEST,
    data,
  };
};

export const logoutRequestAction = () => {
  return {
    type: LOG_OUT_REQUEST,
  };
};

const reducer = (state: any = initialState, action: any) => {
  switch (action.type) {
    case LOG_IN_REQUEST:
      return {
        ...state,
        logInLoading: true,
        logInError: null,
        logInDone: false,
      };

    case LOG_IN_SUCCESS:
      return {
        ...state,
        logInLoading: false,
        logInDone: true,
        me: dummyUser(action.data),
      };

    case LOG_IN_FAILURE:
      return {
        ...state,
        logInLoading: false,
        logInError: action.error,
      };

    case LOG_OUT_REQUEST:
      return {
        ...state,
        logOutLoading: true,
        logOutDone: false,
        logOutError: null,
      };

    case LOG_OUT_SUCCESS:
      return {
        ...state,
        logOutLoading: false,
        logOutDone: true,
        me: null,
      };

    case LOG_OUT_FAILURE:
      return {
        ...state,
        logOutLoading: false,
        logOutError: action.error,
      };

    case SIGN_UP_REQUEST:
      return {
        ...state,
        signUpLoading: true,
        signUpDone: false,
        signUpError: null,
      };

    case SIGN_UP_SUCCESS:
      return {
        ...state,
        signUpLoading: false,
        signUpDone: true,
      };

    case SIGN_UP_FAILURE:
      return {
        ...state,
        signUpLoading: false,
        signUpError: action.error,
      };

    case CHANGE_NICKNAME_REQUEST:
      return {
        ...state,
        changeNicknameLoading: true,
        changeNicknameDone: false,
        changeNicknameError: null,
      };

    case CHANGE_NICKNAME_SUCCESS:
      return {
        ...state,
        changeNicknameLoading: false,
        changeNicknameDone: true,
      };

    case CHANGE_NICKNAME_FAILURE:
      return {
        ...state,
        changeNicknameLoading: false,
        changeNicknameError: action.error,
      };

    default:
      return state;
  }
};

export default reducer;
```

 

logInLoading true까지 되고

로그인 무한 로딩이 걸립니다.

뭐가 문제일까요 ..

Next.jsnodejsreduxexpressreact

Answer 1

0

zerocho님의 프로필 이미지
zerocho
Instructor

네트워크 탭을 봐보세요. 백엔드 서버에 에러가 있을 겁니다. 백엔드 콘솔도 보세요

김주호님의 프로필 이미지
김주호
Questioner

아직 백엔드 (노드) 부분 연결을 안하고 더미로 진행하고 있습니다
코드상에서는 문제가 없는 게 맞죠 ..?

zerocho님의 프로필 이미지
zerocho
Instructor

콘솔로그는 어디까지 뜨나요?? logIn 안에도 넣어보세요

김주호님의 프로필 이미지
김주호
Questioner

const reducer = (state: any = initialState, action: any) => {
  switch (action.type) {
    case LOG_IN_REQUEST: {
      console.log("reducer LOG_IN_REQUEST");

      return {
        ...state,
        logInLoading: true,
        logInError: null,
        logInDone: false,
      };
    } 

위 코드 reducer switch 문까지는 제대로 떠요..!

 function* watchLogin() {   console.log(“사가로그인 리스너 “);   yield takeLatest(LOG_IN_REQUEST, logIn); }

로그인 버튼 클릭 시 위의 사가로그인 리스너 로그가 안뜨는 것 같아요.

Redux 사가 연결이 제대로 안된 것 같은데 도무지 모르겠습니다 ..

연결부 코드는 아래와 같아요 ..!

// sagas/index
export default function* userSaga() {
  yield all([fork(watchLogin), fork(watchLogOut), fork(watchSignUp)]);
}

//sagas/user
export default function* rootSaga() {
  yield all([fork(postSaga), fork(userSaga)]);
}


//store/configureStore
import { createWrapper } from “next-redux-wrapper”;
import { createStore, applyMiddleware, compose } from “redux”;
import reducer from “../reducers”;
import rootSaga from “../sagas”;
import { composeWithDevTools } from “redux-devtools-extension”;
import createSagaMiddleware from “redux-saga”;

const configureStore = () => {
  const sagaMiddleware = createSagaMiddleware();
  const middlewares: any = [sagaMiddleware];

  const enhancer =
    process.env.NODE_ENV === “production”
      ? compose(applyMiddleware(…middlewares))
      : composeWithDevTools(applyMiddleware(…middlewares));

  const store: any = createStore(reducer, enhancer);
  store.sagaTask = sagaMiddleware.run(rootSaga);

  return store;
};

const wrapper = createWrapper(configureStore, {
  debug: process.env.NODE_ENV === “development”,
});

export default wrapper;
zerocho님의 프로필 이미지
zerocho
Instructor

rootSaga랑 userSaga에도 콘솔로그 하나씩 넣어보세요. 어디서부터 안 되는지 파악이 중요합니다. 코드는 문제가 없어 보이는데 못 찾은 오타가 있을 수 있습니다. 오타 찾는 게 워낙 힘든 일이어서요.

김주호님의 프로필 이미지
김주호
Questioner

네 ㅠㅠ 다시한번 꼼꼼하게 찾아보겠습니다.

답변 너무 감사드려요 !

김주호's profile image
김주호

asked

Ask a question