-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
serverState undefine 출력
23.08.14 14:32 작성 23.08.14 14:32 수정 조회수 116
0
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가 나오나요?
답변을 작성해보세요.
0
조현영
지식공유자2023.08.14
serverState가 서버로부터 온 redux state입니다. 서버에서 dispatch한 값을 받아서 클라이언트 redux에 넣어주어야 해서 그렇습니다.
i1004gy
질문자2023.08.14
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에서 하이드레이트하는 부분의 코드 문법이 약간 달랐네요 주말동안 바쁘실텐데 해결해주시려고 해주셔서 감사합니다!!!
이 블로그가 도움이 되었습니다!!
조현영
지식공유자2023.08.14
아.. 그거 보고 확인해봤는데요. rootReducer를 그렇게 할 필요는 없고요. toolkit github 코드에서 다음과 같이 하면 그냥 됐네요. 실수로 [HYDRATE] 이렇게 되어 있었습니다.
extraReducers: (builder) => builder
.addCase(HYDRATE, (state, action) => ({
...state,
...action.payload.post,
}))
답변 1