2023-08-04T21:55:05.798Z

0

/user/Followers/pending 액션에는 me에 정보가 들어있지 않습니다

getServerSideProps를 따로 설정해야하는 부분이 있었나요 몇강에 나왔는지 알 수 있나요?

import { configureStore } from '@reduxjs/toolkit';
import { createWrapper } from 'next-redux-wrapper';
import reducer from '../reducers';

function getServerState() {
  return typeof document !== 'undefined'
    ? JSON.parse(document.querySelector('#__NEXT_DATA__').textContent)?.props.pageProps.initialState
    : undefined;
}
const serverState = getServerState();
console.log('serverState', serverState);
const makeStore = () => configureStore({
  reducer,
  devTools: true,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
  preloadedState: serverState, // SSR
});

export default createWrapper(makeStore);

configureSotre.js에 설정하는거 말고 다른 곳에 설정해야하는게 있나요?

0

me라는 정보를 처음부터 얻어오려면 다른 페이지들처럼 getServerSideProps를 하셔야 합니다.

https://github.com/ZeroCho/react-nodebird/blob/master/ch7/front/pages/profile.js#L63-L77

이 내용은 공통인 겁니다.

0

아, 아직 서버사이드 렌더링 강의를 안 들으신 거군요. 서버사이드렌더링 섹션 들으시면 새로고침 문제는 해결됩니다.

0

아 그러네요 다음 챕터에 SSR설정하는게 있군요

그럼 한가지만 더 질문하겠습니다 action의 실행을 보면

/user/Followers/pending

/user/Following/pending

/user/loadMyInfo/pending

이 순서 대로 진행이 되는데 이는

  useEffect(() => {
    if (!(me && me.id)) {
      Router.push("/");
    }
  }, [me && me.id]);

  useEffect(() => {
    dispatch(loadFollowers());
    dispatch(loadFollowings());
  }, []);

이 코드들이 실행되서 그럴 것일 겁니다 loadMyInfo는 Router.push가 작동하면서 index페이지로 넘어가고 index페이지에있는 loadmyinfo action이 실행되는 것일겁니다

그런데 자바스크립트의 코드 진행순서는 위에서 아래로 순서대로 실행하는것이 아닌가요?

왜 아래에 있는 loadFollowers와 loadFollowing이 먼저 실행되고 그후에 Router.push가 실행되는 것인가요?

0

안에 콘솔로그 한번씩 찍어보시면 될 것 같습니다. 제 예상은

Router.push
loadFollowers
loadFollowings
loadMe
이렇게 될 것 같네요.

다른 페이지로 이동한다고 해서 아래 useEffect가 안 실행되는 건 아닙니다.