강의

N
챌린지

멘토링

로드맵

Inflearn brand logo image

인프런 커뮤니티 질문&답변

uphoon님의 프로필 이미지
uphoon

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

무한스크롤 request 호출문제

작성

·

439

0

선생님 이번에 무한스크롤 구현하면서 지금 리퀘스트 요청이 여러번 발생하는걸 if문에 로딩시에만 if문이 발생하게 고쳐서 여러번 반복되게 하는걸 한번만 호출 할수있게 고치신걸로 아는데요 저도 분명히 고쳤는데 호출이 2번씩일어나는데 한번 봐주시면 감사하겠습니다. 코드 여러군데 봐도 왜 호출이 두번 일어나는지 모르겠네요 한번 봐주시면 감사하겠습니다.

//index.js

import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import AppLayout from '../components/AppLayout'
import PostForm from '../components/PostForm'
import PostCard from '../components/PostCard'
import { LOAD_POST_REQUEST } from '../reducers/post'

const Home = () => {
  const dispatch = useDispatch();
  const { me } = useSelector((state) => state.user)
  const { mainPosts, hasMorePost, getPostLoadding } = useSelector((state) => state.post)

  useEffect(() => {
    dispatch({
      type: LOAD_POST_REQUEST,
    })
  }, [])

  useEffect(() => {
    function onScroll() {
      console.log(window.scrollY, document.documentElement.clientHeight, document.documentElement.scrollHeight)
      if (window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300) {
        if(hasMorePost && !getPostLoadding){
          dispatch({
            type: LOAD_POST_REQUEST,
          })
        }
      }
    }
    window.addEventListener('scroll', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
    }
  }, [hasMorePost, getPostLoadding])

  return (
    <AppLayout>
      {me && <PostForm />}
      {mainPosts.map((item) => <PostCard key={item.id} post={item} />)}
    </AppLayout>
  )
}

export default Home

 

 

/reducers/post.js

import shortId from 'shortid';
import produce from 'immer';
import faker from 'faker';

export const initialState = {
    mainPosts: [{
        id: 1,
        User: {
            id: 1,
            nickname: '제로초',
        },
        content: '첫번째 게실글 #해시태그 #익스프레스',
        Images: [{
            id: shortId.generate(),
            src: 'https://bookthumb-phinf.pstatic.net/cover/137/995/13799585.jpg?udate=20180726',
        }, {
            id: shortId.generate(),
            src: 'https://gimg.gilbut.co.kr/book/BN001958/rn_view_BN001958.jpg',
        }, {
            id: shortId.generate(),
            src: 'https://gimg.gilbut.co.kr/book/BN001998/rn_view_BN001998.jpg',
        }],
        Comments: [{
            id: shortId.generate(),
            User: {
                id: shortId.generate(),
                nickname: 'nero',
            },
            content: '우와우와'
        }, {
            id: shortId.generate(),
            User: {
                id: shortId.generate(),
                nickname: 'wi',
            },
            content: '힘내자'
        }],
    }],
    imagePath: [],
    hasMorePost : true,
    getPostLoadding: false,
    getPostDone: false,
    getPostErr: null,
    addPostLoadding: false,
    addPostDone: false,
    addPostErr: null,
    removePostLoadding: false,
    removePostDone: false,
    removePostErr: null,
    addCommentLoadding: false,
    addCommentDone: false,
    addCommentErr: null,
}


export const getDemmuyPost = (number) => Array(number).fill().map(() => ({
    id: shortId.generate(),
    User: {
        id: shortId.generate(),
        nickname: faker.name.findName(),
    },
    content: faker.lorem.paragraph(),
    Images: [{
        src: faker.image.image(),
    }],
    Comments: [{
        User: {
            id: shortId.generate(),
            nickname: faker.name.findName(),
        },
        content: faker.lorem.sentence(),
    }],
}))

export const LOAD_POST_REQUEST = 'LOAD_POST_REQUEST'
export const LOAD_POST_SUCCESS = 'LOAD_POST_SUCCESS'
export const LOAD_POST_FAILURE = 'LOAD_POST_FAILURE'

export const ADD_POST_REQUEST = 'ADD_POST_REQUEST'
export const ADD_POST_SUCCESS = 'ADD_POST_SUCCESS'
export const ADD_POST_FAILURE = 'ADD_POST_FAILURE'

export const REMOVE_POST_REQUEST = 'REMOVE_POST_REQUEST'
export const REMOVE_POST_SUCCESS = 'REMOVE_POST_SUCCESS'
export const REMOVE_POST_FAILURE = 'REMOVE_POST_FAILURE'

export const ADD_COMMENT_REQUEST = 'ADD_COMMENT_REQUEST'
export const ADD_COMMENT_SUCCESS = 'ADD_COMMENT_SUCCESS'
export const ADD_COMMENT_FAILURE = 'ADD_COMMENT_FAILURE'



export const addPostAction = (data) => {
    console.log(data)
    return {
        type: ADD_POST_REQUEST,
        data
    }
}

export const addCommentAction = (data) => {
    console.log(data)
    return {
        type: ADD_COMMENT_REQUEST,
        data
    }
}

const dummyPost = (data) => (
    {
        id: data.id,
        content: data.content,
        User: {
            id: 1,
            nickname: '제로초',
        },
        Images: [],
        Comments: [],
    }
)

const dummyComment = (data) => (
    {
        id: shortId.generate(),
        content: data,
        User: {
            id: 1,
            nickname: '제로초',
        },
    }
)

const reducer = (state = initialState, action) => {
    return produce(state, (draft) => {
        switch (action.type) {
            case LOAD_POST_REQUEST:
                draft.getPostLoadding = true
                draft.getPostDone = false
                draft.getPostErr = null

                break;
            case LOAD_POST_SUCCESS:
                draft.getPostLoadding = false
                draft.getPostDone = true
                draft.mainPosts = action.data.concat(draft.mainPosts)
                draft.hasMorePost = draft.mainPosts.length < 50
                break;
            case LOAD_POST_FAILURE:
                draft.getPostLoadding = false
                draft.getPostErr = action.err

                break;

            case ADD_POST_REQUEST:
                draft.addPostLoadding = true
                draft.addPostDone = false
                draft.addPostErr = null

                break;
            case ADD_POST_SUCCESS:
                draft.addPostLoadding = false
                draft.addPostDone = true
                draft.mainPosts.unshift(dummyPost(action.data))

                break;
            case ADD_POST_FAILURE:
                draft.addPostLoadding = false
                draft.addPostErr = action.err

                break;
            case REMOVE_POST_REQUEST:
                draft.removePostLoadding = true
                draft.removePostDone = false
                draft.removePostErr = null
                break;

            case REMOVE_POST_SUCCESS:
                draft.removePostLoadding = false
                draft.removePostDone = true
                draft.mainPosts = state.mainPosts.filter((item) => item.id !== action.data)
                break;
            case REMOVE_POST_FAILURE:
                draft.removePostLoadding = false
                draft.removePostErr = action.err
                break;
            case ADD_COMMENT_REQUEST:
                draft.addCommentLoadding = true
                draft.addCommentDone = false
                draft.addCommentErr = null
                break;
            case ADD_COMMENT_SUCCESS:
                const post = draft.mainPosts.find((item) => item.id === action.data.postId)
                post.Comments.unshift((dummyComment(action.data.content)))

                draft.addCommentLoadding = false
                draft.addCommentDone = true
                break;
            case ADD_COMMENT_FAILURE:
                draft.addCommentLoadding = false
                draft.addCommentErr = action.error

            default:
                return state
        }
    })
}

export default reducer

 

import { delay, all, fork, takeLatest, put, throttle } from "redux-saga/effects";
import {
    ADD_POST_REQUEST, ADD_POST_SUCCESS, ADD_POST_FAILURE,
    REMOVE_POST_REQUEST, REMOVE_POST_SUCCESS, REMOVE_POST_FAILURE,
    ADD_COMMENT_REQUEST, ADD_COMMENT_SUCCESS, ADD_COMMENT_FAILURE,
    LOAD_POST_REQUEST, LOAD_POST_SUCCESS, LOAD_POST_FAILURE, getDemmuyPost
} from '../reducers/post'

import { ADD_POST_TO_ME, REMOVE_POST_TO_ME } from "../reducers/user";

import shortId from 'shortid';

function addPostAPI(data) {
    return axios.post('/api/addPost', data)
}

function* addPost(action) {
    try {
        // const result = yield call(addPostAPI, action.data)
        yield delay(1000)
        const id = shortId.generate();
        yield put({
            type: ADD_POST_SUCCESS,
            data: { id, content: action.data }
        })
        yield put({
            type: ADD_POST_TO_ME,
            data: id
        })
    } catch (err) {
        yield put({
            type: ADD_POST_FAILURE,
            data: err.response.data
        });
    }
}

function removePostAPI(data) {
    return axios.post('/api/addPost', data)
}

function* removePost(action) {
    try {
        // const result = yield call(addPostAPI, action.data)
        yield delay(1000)
        yield put({
            type: REMOVE_POST_SUCCESS,
            data: action.data
        })
        yield put({
            type: REMOVE_POST_TO_ME,
            data: action.data
        })
    } catch (err) {
        yield put({
            type: REMOVE_POST_FAILURE,
            data: err.response.data
        });
    }
}

function addCommentAPI(data) {
    return axios.post('/api/addPost', data)
}

function* addComment(action) {
    try {
        // const result = yield call(addPostAPI, action.data)
        yield delay(1000)
        yield put({
            type: ADD_COMMENT_SUCCESS,
            data: action.data
        });
    } catch (err) {
        yield put({
            type: ADD_COMMENT_FAILURE,
            data: err.response.data
        });
    }
}

function loadPostAPI(data) {
    return axios.get('/api/posts', data)
}

function* loadPost(action) {
    try {
        // const result = yield call(addPostAPI, action.data)
        yield delay(1000)
        yield put({
            type: LOAD_POST_SUCCESS,
            data: getDemmuyPost(10)
        });
    } catch (err) {
        yield put({
            type: LOAD_POST_FAILURE,
            data: err.response.data
        });
    }
}

function* watchLoadPost() {
    yield throttle(5000, LOAD_POST_REQUEST, loadPost)
}

function* watchAddPost() {
    yield takeLatest(ADD_POST_REQUEST, addPost)
}

function* watchRemovePost() {
    yield takeLatest(REMOVE_POST_REQUEST, removePost)
}

function* watchCommentPost() {
    yield takeLatest(ADD_COMMENT_REQUEST, addComment)
}


export default function* postSaga() {
    yield all([
        fork(watchAddPost),
        fork(watchCommentPost),
        fork(watchRemovePost),
        fork(watchLoadPost),
    ]);
}
reduxnodejsreactexpressNext.js

답변 1

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

getPostLoadding 오타 아닌가요?

uphoon님의 프로필 이미지
uphoon
질문자

넵 선생님 getPostLoadding 오타 없고 리듀서 부분하고 앞 index.js부분하고 스펠링 같은데 2번씩 호출 되네요 ㅠ

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

.next 폴더 지우고 다시 빌드해보시겠어요? 코드 상에는 Home이 두 번 등록된 게 아닌 이상 문제가 없습니다.

uphoon님의 프로필 이미지
uphoon
질문자

imageimage첫번째 리퀘스트 보낼때는 잘바뀌고합니다 두번째 리퀘스트는 첫번째 리퀘스트랑 바뀐 스테이트 값이 없어서 표시는 안되는 상태입니다. 스크롤 천천히내리면 리퀘스트 한번호출 되는데 선생님이 하신것처럼 막 비비면 2개씩 호출이 되네요... ㅠㅠ next 지우고 9버전으로 다시 인스톨하고 빌드해도 이런식입니다 ㅠㅠ

uphoon님의 프로필 이미지
uphoon
질문자

선생님 깃허브에 있는 코드로 바꿔서 돌려도 오류나는데 혹시선생님은 안나시는게 맞으신거죠... 뭐가 문제일까요 지금 계속 머리 싸매고 있습니다ㅠㅠ

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

이 부분은 제 깃헙 intersectionObserver 폴더에 있는 intersectionObserver 코드를 쓰시는 게 좋습니다. 좀 더 현대적인 방법입니다.

uphoon님의 프로필 이미지
uphoon

작성한 질문수

전체 Q&A
질문하기