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

manhattansky73님의 프로필 이미지

작성한 질문수

React로 NodeBird SNS 만들기

제로초님 진심 으로 안풀려서 문의드립니다...

해결된 질문

작성

·

239

0

제로초님 노드 도서도 구매했고 동영상강의 수강중인 개발자입니다.

다름이 아니오라 3-4. 리덕스와 리엑트 연결하기 강좌 듣고 실습하는데 에러가 발생해서요

아래와 같은 에러인데요 기존 다른 질문답변 조회해 보니 버전이 안맞고 next 버전이 9.대가 아니라는데

저는 제로초님 git에서 소스 최근에 받아보니 9.대였거든요 

도무지 해결이 안되어서 문의드립니다.

최근 설정파일 소스라도 알려주심 안될까요?

어떻게 해결해야 하는지요????

_app.js 코드내용은 다음과 같습니다

 import React from 'react';
import Head from 'next/head';
import PropTypes from 'prop-types';
//import 'antd/dist/antd.css';
import AppLayout from '../components/AppLayout';
import { Provider } from 'react-redux';
import reducer from '../reducers'
import withRedux from 'next-redux-wrapper'
import {createStorefrom 'redux';
//import wrapper from '../store/configureStore';




const NodeBird = ({ Componentstore }) => {
  return (
    <Provider store={store}>
      <Head>
        <title>NodeBird</title>
      </Head>
      <AppLayout>
        <Component />
      </AppLayout>
    </Provider>
  );
};

NodeBird.propTypes = {
  Component: PropTypes.elementType.isRequired,
  store: PropTypes.object,
};

export default withRedux((initialStateoptions=> {
  const store = createStore(reducerinitialState);   //state와 리듀서가 합쳐있는게 store
  //차후 커스터마이징
  return store;
})(NodeBird);    //withRedux 고차컴포넌트, 기존컴포넌트의 기능확장
//export default wrapper.withRedux(NodeBird);


//모든 페이지에 공통으로 들어가기 때문에 레이아웃역할을 한다
//리액트와 리덕스 연결하는 코드 작성 => 모든 컴포넌트가 _app.js내 리덕스 state 공유
//NEXT 에서는 리액트에 리덕스 적용하는 방법
//npm i next-redux-wrapper 실행

package.json 입니다

{
  "name""react-nodebird-front",
  "version""1.0.0",
  "description""",
  "main""index.js",
  "scripts": {
    "dev""next -p 3061",
    "build""next build",
    "start""next start"
  },
  "author""ZeroCho",
  "license""MIT",
  "dependencies": {
    "@ant-design/icons""^4.2.1",
    "antd""^4.3.0",
    "axios""^0.19.2",
    "faker""^4.1.0",
    "immer""^7.0.1",
    "next""^9.4.4",
    "next-redux-saga""^4.1.2",
    "next-redux-wrapper""^6.0.1",
    "prop-types""^15.7.2",
    "react""^16.13.1",
    "react-dom""^16.13.1",
    "react-redux""^7.2.0",
    "react-slick""^0.26.1",
    "redux""^4.0.5",
    "redux-devtools-extension""^2.13.8",
    "redux-saga""^1.1.3",
    "shortid""^2.2.15",
    "styled-components""^5.1.1"
  },
  "devDependencies": {
    "babel-eslint""^10.1.0",
    "eslint""^7.1.0",
    "eslint-config-airbnb""^18.1.0",
    "eslint-plugin-import""^2.20.2",
    "eslint-plugin-jsx-a11y""^6.2.3",
    "eslint-plugin-react""^7.20.0",
    "eslint-plugin-react-hooks""^4.0.4",
    "nodemon""^2.0.4",
    "webpack""^4.43.0"
  }
}

Server Error

TypeError: Cannot read property 'getState' of undefined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:///D:/react-nodebird-master/ch3/front/node_modules/react-redux/lib/components/Provider.js (31:18)
Object.useMemo
file:///D:/react-nodebird-master/ch3/front/node_modules/react-dom/cjs/react-dom-server.node.development.js (1239:19)
useMemo
file:///D:/react-nodebird-master/ch3/front/node_modules/react/cjs/react.development.js (1521:21)
Provider
file:///D:/react-nodebird-master/ch3/front/node_modules/react-redux/lib/components/Provider.js (30:42)
processChild
file:///D:/react-nodebird-master/ch3/front/node_modules/react-dom/cjs/react-dom-server.node.development.js (3043:14)
resolve
file:///D:/react-nodebird-master/ch3/front/node_modules/react-dom/cjs/react-dom-server.node.development.js (2960:5)
ReactDOMServerRenderer.render
file:///D:/react-nodebird-master/ch3/front/node_modules/react-dom/cjs/react-dom-server.node.development.js (3435:22)
ReactDOMServerRenderer.read
file:///D:/react-nodebird-master/ch3/front/node_modules/react-dom/cjs/react-dom-server.node.development.js (3373:29)
renderToString
file:///D:/react-nodebird-master/ch3/front/node_modules/react-dom/cjs/react-dom-server.node.development.js (3988:27)
Object.renderPage
file:///D:/react-nodebird-master/ch3/front/node_modules/next/dist/next-server/server/render.js (50:851)

답변 4

0

정말로 감사합니다~ 해결됐네요~(^^)v 

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

네 next@9랑 next@8이랑 좀 많이 다릅니다. 특히 redux 연결 부분이 완전 다릅니다.

0

해결됐습니다... 정말로 감사합니다~~

새버전 환경하고 기존 환경으로 개발하는것의 개발 내용의 차이가 많은지요?

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

리뉴얼 이전 강좌를 수강중이시군요

소스 코드는 old branch에 있습니다.

https://github.com/ZeroCho/react-nodebird/tree/old

next@8과 next-redux-wrapper@3 버전으로 실습하셔야 합니다.