serverState undefine 출력

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

getStaticProps 사용해보기

작성

203

수정됨

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
  });
const wrapper = createWrapper(makeStore);
export default wrapper;

ssr 문제를 계속 해결해보고 있는데 지금 보니 console.log()에 serverState가 undefined가 나옵니다 이게 혹시 문제의 원인인가 싶어서 그런데 serverState는 무었이고 왜 undefined가 나오나요?

react redux node.js express next.js

답변 1

제로초(조현영)

지식공유자

serverState가 서버로부터 온 redux state입니다. 서버에서 dispatch한 값을 받아서 클라이언트 redux에 넣어주어야 해서 그렇습니다.

i1004gy

질문자

serverState가 서버로부터 온 redux state입니다. 서버에서 dispatch한 값을 받아서 클라이언트 redux에 넣어주어야 해서 그렇다면 처음에는 아무것도 없으니까 undefined가 당연하다는 말씀이신가요?

그리고 오류해결했습니다

reducers/index.js
 
import { combineReducers } from "redux";
import { HYDRATE } from "next-redux-wrapper";
import axios from "axios";

import userSlice from "./user";
import postSlice from "./post";

axios.defaults.baseURL = "http://localhost:3065";
axios.defaults.withCredentials = true;

// (이전상태, 액션) => 다음상태
const rootReducer = (state, action) => {
  switch (action.type) {
    case HYDRATE:
      console.log("HYDRATE", action);
      return action.payload;
    default: {
      const combinedReducer = combineReducers({
        user: userSlice.reducer,
        post: postSlice.reducer,
      });
      return combinedReducer(state, action);
    }
  }
};

export default rootReducer;

index.js에서 하이드레이트하는 부분의 코드 문법이 약간 달랐네요 주말동안 바쁘실텐데 해결해주시려고 해주셔서 감사합니다!!!

https://kir93.tistory.com/entry/NextJS-Redux-Toolkit-next-redux-wrapper-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

이 블로그가 도움이 되었습니다!!

제로초(조현영)

지식공유자

아.. 그거 보고 확인해봤는데요. rootReducer를 그렇게 할 필요는 없고요. toolkit github 코드에서 다음과 같이 하면 그냥 됐네요. 실수로 [HYDRATE] 이렇게 되어 있었습니다.

extraReducers: (builder) => builder
.addCase(HYDRATE, (state, action) => ({
...state,
...action.payload.post,
}))

i1004gy

질문자

아 그렇군요 []괄호 하나때문에 며칠을 고생했네요 ㅋㅋㅋㅋ 감사합니다!!

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

serverState undefine 출력