2023-08-14T05:34:38.736Z

1

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

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

0

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

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

0

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