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

HYDRATE를 안 쓰는 게 더 나을 것 같습니다. reducer에서 hydrate 관련 액션을 제거하시고요.

store를 만들 때 이렇게 서버에서 나오는 데이터를 바로 꽂는 것이 더 안정적일 것 같네요.

function getServerState() {
  return JSON.parse(document.getElementById('__NEXT_DATA__').textContent).props.pageProps.initialState;
}
const store = configureStore({
  reducer,
  middleware: [firstMiddleware, ...getDefaultMiddleware()],
  preloadedState: typeof window !== undefined ? getServerState() : undefined
});

이 강좌는 리덕스 강좌 리뉴얼하기 한참 전 강좌입니다.

리덕스 업데이트 강의에서 saga 따로 안쓰고도 구현 가능한 요령 말씀해주셨는데, saga를 따로 쓰신 이유가 궁금합니다.

헉.. useForm에 defaultValue에 안넣고 화면 상에다가 그리니 값이 제대로 나오네요. 따로 업데이트 해주어야겠네요. 정말 감사합니다! 그러면 페이지로 직접 들어가는 경우에는 값이 다 채워져서 렌더링이 되었는데. 이 이유는 페이지로 직접 들어가는 경우(새로고침 또는 URL치고 진입)에는 잠시라도 값이 비는 상황이 없어서 그런 것인가요?

이거 useForm에 defaultValue가 처음에 빈값으로 들어가서 그 다음에 hydrate가 되더라도 업데이트 안 되는거 아닌가요? useForm의 데이터를 따로 업데이크해주셔야할것같은데요.

네. 리덕스툴킷과 사가를 같이 썼습니다. 알려주신 데이터를 바로 꽂는 방법으로 해봤는데. 같은 상황이네요; 

한번 적용해 봤는데 리덕스 코드 내에서 window를 먼저 호출해서 그런가 undefined라고 되어있네요

저도 비슷한 에러인데요, 혹시 코드 사가랑 툴킷 다 쓰신건가요?

  말씀해주신대로 콘솔을 찍어 보았습니다.
 -----HYDRATE----- 이후에 값이 쭉 들어오는데, 화면상에는 값이 노출이 안됩니당...ㅠㅠ 
  리덕스툴킷을 이용해서 작업했습니다. 혹시 리덕스 설정시에 문제가 있는 것일까요..?;;

리덕스 구조가 꼬였을 수도 있습니다.

const state = useSelector(state => state)

console.log(state)

를 컴포넌트에 추가한 뒤 콘솔에 데이터 들어있는지 확인해보세요.