TypeError: Cannot read properties of... - 인프런

질문 없이 알아서 찾고싶은데 생각처럼 진짜 안되네요... 현재 강의 6분30초에서 멈춰있습니다. 에러에 dispatch 가 안된다 하여 또 보니 store 가 undefined 라고 뜹니다. 밑에 저와 똑같은 에러가 발생한 분은 오타셨고 저도 열씸히 오타인지 찾아봤지만 제대로 작성한것 같습니다 configureStore 도 잘 import 했는데 뭐가 문제일까요 서버도 다 재시작해봤는데 안돼용

// index.js
 
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";

import AppLayout from "../components/AppLayout";
import PostForm from "../components/PostForm";
import PostCard from "../components/PostCard";
import { LOAD_POSTS_REQUEST } from "../reducers/post";
import { LOAD_USER_REQUEST } from "../reducers/user";
import wrapper from "../store/configureStore";


const Home = () => {
 const dispatch = useDispatch();
 const { me } = useSelector((state) => state.user);
 const { mainPosts, hasMorePosts, loadPostsLoading, retweetError } = useSelector((state) => state.post);

 // 자신의 게시글을 리트윗하려 할 때
 useEffect(() => {
 if(retweetError) {
 alert(retweetError); 
 }
 }, [retweetError]);


 useEffect(() => {
 // 현재 어느 스크롤 위치에 있는지 판단
 function onScroll() {
 if (
 window.scrollY + document.documentElement.clientHeight >
 document.documentElement.scrollHeight - 300
 ) {
 if (hasMorePosts && !loadPostsLoading) { 
 // 로딩이 되고 있을 동안 loadPostsLoading 은 true 이므로 해당 코드 실행되지 x
 // 로딩이 끝나고 나서 loadPostsLoading 가 false 가 되면 그때 실행
 const lastId = mainPosts[mainPosts.length - 1]?.id // 마지막 게시글 id
 // && 대신 optional chaining 활용 
 // => 게시물이 하나도 없을 경우 undefined.id 에러가 발생할 수 있으므로 ?. 로 방지
 dispatch({
 type: LOAD_POSTS_REQUEST, // 스크롤 다 내리면 다음 더미데이터 로딩해라
 lastId, // 마지막 게시글 id
 })
 }
 }
 }
 window.addEventListener("scroll", onScroll);
 
 return () => {
 window.removeEventListener("scroll", onScroll);
 };
 }, [hasMorePosts, loadPostsLoading, mainPosts]);

 return (
 <AppLayout>
 {me && <PostForm />}
 {/* 로그인이 된 상태에서만 포스트를 작성할 수 있음 */}
 {mainPosts.map((post) => (
 <PostCard key={post.id} post={post} />
 ))}
 </AppLayout>
 
 );
};

 
export const getServerSideProps = wrapper.getServerSideProps((context) => {
 context.store.dispatch({
 type: LOAD_USER_REQUEST,
 });
 context.store.dispatch({
 type: LOAD_POSTS_REQUEST,
 });
 // console.log(context);
});
 

export default Home;

// configureStore.js

import { createWrapper } from "next-redux-wrapper";
import { applyMiddleware, compose, createStore } from "redux";
import { composeWithDevTools } from 'redux-devtools-extension';
import createSagaMiddleware from 'redux-saga';

import reducer from "../reducers";
import rootSaga from '../sagas';

 
const loggerMiddleware = ({ dispatch, getState }) => (next) => (action) => {
 console.log(action) // action 을 실행하기 전에 console.log() 를 한번 실행해주는 미들웨어
 return next(action);
}

const configureStore = () => {
 const sagaMiddleware = createSagaMiddleware()
 // const middlewares = [sagaMiddleware];
 const middlewares = [sagaMiddleware, loggerMiddleware];
 
 // enhancer: 리덕스의 기능이 확장된 것
 const enhancer = process.env.NODE_ENV === 'production'
 ? compose(applyMiddleware(...middlewares)) // 배포용
 : composeWithDevTools(applyMiddleware(...middlewares)) // 개발용 

 const store = createStore(reducer, enhancer);
 store.sagaTask = sagaMiddleware.run(rootSaga);
 return store; // state , reducer 를 포함한 것
};

// next-redux-wrapper 로 만듦
const wrapper = createWrapper(configureStore, {
 debug: process.env.NODE_ENV === "development",
});

export default wrapper;

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

TypeError: Cannot read properties of undefined (reading 'dispatch')