보시면 주소창에는 익스프레스 해시태그를 선택한 상태인데 화면에 출력은 변화하지 않고 있습니다.
리덕스에서는 정상적으로 선택된것 같은데 해당 해시태그로 이동하지 않고 있는것 같습니다.
그런데 또 해당 해시태그 주소에서 새로고침을 하면 위에 스샷 화면에서 해당 해쉬태그만 있는 게시물만 정상적으로 출력됩니다. 도대체 어디가 문제인지 갈피를 못잡고 있습니다.
import React, { useEffect } from "react";
import axios from "axios";
import { useRouter } from "next/router";
import { END } from 'redux-saga';
import { useDispatch, useSelector } from "react-redux";
import AppLayout from "../../components/AppLayout";
import wrapper from "../../store/configureStore";
import PostCard from "../../components/PostCard";
import { LOAD_HASHTAG_POSTS_REQUEST } from "../../reducers/post";
import { LOAD_MY_INFO_REQUEST } from "../../reducers/user";
const Hashtag = () => {
const dispatch = useDispatch();
const router = useRouter();
const { tag } = router.query;
const { mainPosts, hasMorePosts, loadPostsLoading } = useSelector((state) => state.post);
useEffect(() => {
function onScroll() {
if (window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300) {
if (hasMorePosts && !loadPostsLoading) {
dispatch({
type: LOAD_HASHTAG_POSTS_REQUEST,
lastId: mainPosts[mainPosts.length - 1] && mainPosts[mainPosts.length - 1].id,
data: tag,
})
}
}
}
window.addEventListener('scroll', onScroll);
return () => {
window.removeEventListener('scroll', onScroll);
}
}, [hasMorePosts, loadPostsLoading, mainPosts.length, tag])
return (
<AppLayout>
{mainPosts.map((c) => (
<PostCard key={c.id} post={c} />
))}
</AppLayout>
)
}
export const getServerSideProps = wrapper.getServerSideProps(async (context) => {
const cookie = context.req ? context.req.headers.cookie : '';
axios.defaults.headers.Cookie = '';
if (context.req && cookie) {
axios.defaults.headers.Cookie = cookie;
}
context.store.dispatch({
type: LOAD_MY_INFO_REQUEST,
})
context.store.dispatch({
type: LOAD_HASHTAG_POSTS_REQUEST,
data: context.params.tag,
})
context.store.dispatch(END);
await context.store.sagaTask.toPromise();
})
export default Hashtag;
case LOAD_USER_POSTS_REQUEST:
case LOAD_HASHTAG_POSTS_REQUEST:
case LOAD_POSTS_REQUEST:
draft.loadPostsLoading = true;
draft.loadPostsDone = false;
draft.loadPostsError = null;
break;
case LOAD_USER_POSTS_SUCCESS:
case LOAD_HASHTAG_POSTS_SUCCESS:
case LOAD_POSTS_SUCCESS:
draft.loadPostsLoading = false;
draft.loadPostsDone = true;
draft.mainPosts = draft.mainPosts.concat(action.data);
draft.hasMorePosts = action.data.length === 10;
break;
case LOAD_USER_POSTS_FAILURE:
case LOAD_HASHTAG_POSTS_FAILURE:
case LOAD_POSTS_FAILURE:
draft.loadPostsLoading = false;
draft.loadPostsError = action.error;
break;
function loadHashtagPostsAPI(data, lastId) {
return axios.get(`/hashtag/${encodeURIComponent(data)}?lastId=${lastId || 0}`);
}
function* loadHashtagPosts(action) {
try {
const result = yield call(loadHashtagPostsAPI, action.data, action.lastId)
yield put({
type: LOAD_HASHTAG_POSTS_SUCCESS,
data: result.data,
})
} catch (err) {
console.error(err)
yield put({
type: LOAD_HASHTAG_POSTS_FAILURE,
error: err.response.data,
})
}
}
const express = require('express');
const { Hashtag, Post, Image, Comment, User } = require('../models');
const { Op } = require('sequelize');
const router = express.Router();
router.get('/:hashtag', async (req, res, next) => { // GET /hashtag/노드
try {
const where = {};
if (parseInt(req.query.lastId, 10)) { // 초기 로딩이 아닐때
where.id = {[Op.lt]: parseInt(req.query.lastId, 10)}
}
const posts = await Post.findAll({
where,
limit: 10,
order: [['createdAt', 'DESC']],
include: [{
model: Hashtag,
where: { name: decodeURIComponent(req.params.hashtag) },
}, {
model: User,
attributes: ['id', 'nickname'],
}, {
model: Image,
}, {
model: Comment,
include: [{
model: User,
attributes: ['id', 'nickname'],
order: [['createdAt', 'DESC']],
}],
}, {
model: User, // 좋아요 누른사람
as: 'Likers',
attiributes: ['id'],
}, {
model: Post,
as: 'Retweet',
include: [{
model: User,
attiributes: ['id', 'nickname'],
}, {
model: Image,
}]
}]
});
res.status(200).json(posts);
} catch (error) {
console.error(error);
next(error);
}
})
module.exports = router;
코드입니다.
