인프런 커뮤니티 질문&답변
작성한 질문수
TypeError: Cannot read property 'getState' of undefined 에러 질문
작성
·
373
0
웹게임 강좌에서 배운 내용과 이번 강의를 들으면서 배운 내용을 토대로 반응속도를 체크하는 웹사이트를 개인 프로젝트겸 제작해보고 있었습니다. 그런데 아래와 같은 오류가 계속해서 발생합니다.
구글링을 해보니 보통 pages/_app.js에서 오타가 나면 발생한다는데... 잘 모르겠습니다. 아래는 제 _app.js입니다.
import React from 'react';
import PropTypes from 'prop-types';
import 'antd/dist/antd.css';
import Head from 'next/head';
import Helmet from 'react-helmet';
import wrapper from '../store/configureStore';
const App = ({ Component }) => {
return (
<>
<Helmet>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet" />
</Helmet>
<Head>
<meta charSet="utf-8"/>
<title>반응속도체크</title>
</Head>
<Component />
</>
);
};
App.propTypes = {
Component: PropTypes.elementType.isRequired,
}
export default wrapper.withRedux(App);
만약 위 코드에서 wrapper.withRedux(App)이 아니라 export default App; 으로 써줄 경우에는
위 사진과 같은 에러가 발생합니다
store/configureStore.js는 ReactBird 코드를 그대로 갖다써서 오타는 없는 것 같습니다.
답변 1
0
제로초(조현영)
지식공유자
next-redux-wrapper 7버전인가요? 7버전은 강좌 버전인 6버전과 코드가 달라집니다. getServerSideProps가 달라요. 공지사항(새소식) 참고하세요.
제로초(조현영)
지식공유자
redux 설정에서 오타가 난 것 같긴 합니다. 한가지 방법은 제 깃헙 소스코드 초반 부분(리덕스 적용한 부분)을 복사한 후 거기서 다시 시작하시는 겁니다.
긴장한 곰
질문자
store/configureStore.js
import { createWrapper } from 'next-redux-wrapper';
import { applyMiddleware, createStore, compose } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import createSagaMiddleware from 'redux-saga';
import reducer from '../reducers';
import rootSaga from '../sagas';
const configureStore = () => {
const sagaMiddleware = createSagaMiddleware();
const middlewares = [sagaMiddleware];
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;
};
const wrapper = createWrapper(configureStore, {
debug: process.env.NODE_ENV === 'development',
});
export default wrapper;
package.json
{
"name": "responsecheck_project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "next"
},
"author": "taewoong",
"license": "ISC",
"dependencies": {
"@ant-design/icons": "^4.6.2",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"antd": "^4.16.11",
"axios": "^0.21.1",
"immer": "^9.0.5",
"next": "^10.2.3",
"next-redux-wrapper": "^6.0.2",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-redux": "^7.2.4",
"redux": "^4.1.1",
"redux-devtools-extension": "^2.13.9",
"redux-saga": "^1.1.3",
"styled-components": "^5.3.0",
"upgrade": "^1.1.0"
},
"devDependencies": {
"babel-eslint": "^10.1.0",
"eslint": "^7.31.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.24.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0"
}
}
pages/_app.js
import React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
import 'antd/dist/antd.css';
import Helmet from 'react-helmet';
import wrapper from '../store/configureStore';
const App = ({ Component }) => (
<>
<Helmet>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet" />
</Helmet>
<Head>
<meta charSet="utf-8"/>
<title>반응속도체크</title>
</Head>
<Component />
</>
);
App.propTypes = {
Component: PropTypes.elementType.isRequired,
}
export default wrapper.withRedux(App);
제로초님 깃헙에서 그대로 갖다썼는데도 계속 같은 에러가 발생하네요...아무리봐도 이유를 모르겠습니다ㅠㅠ 하루종일 이 에러만 보니 정신이 혼미해지네요
https://github.com/Taewoong1378/ResponseCheck_Site
깃헙에 올려놨으니 시간 여유되실때 봐주시면 정말 감사하겠습니다 ㅠㅠ
next-redux-wrapper를 7버전을 쓰고 있었어서 6버전으로 바꿔줬는데도 동일한 에러가 계속 발생하네요 ㅠㅠ