import { HYDRATE } from "next-redux-wrapper";
const initialState = {
user: {
isLoggedIn: false,
user: null,
signUpData: {},
loginData: {},
},
post: {
mainPosts: []
}
};
export const loginAction = (data) => {
return {
type: "LOG_IN",
data
}
}
export const logoutAction = () => {
return {
type: "LOG_OUT",
}
}
// const changeNickname = (data) => {
// return {
// type: 'CHANGE_NICKNAME',
// data,
// };
// }
// (이전상태, 액션) => 다음상태
const rootReducer = (state = initialState, action) => { // 이니셜스테이트와는 다른객체가 만들어진다 그래야 히스토리가 생성되니깐
switch(action.type) {
case HYDRATE:
return { ...state, ...action.payload}
case 'LOG_IN':
return {
...state,
user: {
...state.user, // 바꾸지 않고픈건 참조관계로 유지해주기
isLoggedIn: true,
user: action.data,
},
};
case 'LOG_OUT':
return {
...state,
user: {
...state.user, // 바꾸지 않고픈건 참조관계로 유지해주기
isLoggedIn: false,
user: null,
},
};
default:
return state;
}
};
export default rootReducer;
계속 아래와 같은 오류가 발생하ㅔㄴ요
4. WrappedApp created new store with withRedux(NodeBird) { initialState: undefined, initialStateFromGSPorGSSR: undefined } Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. at resolveDispatcher (/Users/bbakjun/workspace/node_modules/react/cjs/react.development.js:1476:13) at useMemo (/Users/bbakjun/workspace/node_modules/react/cjs/react.development.js:1531:20) at Provider (/Users/bbakjun/workspace/node_modules/react-redux/lib/components/Provider.js:24:41) at processChild (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14) at resolve (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5) at ReactDOMServerRenderer.render (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22) at ReactDOMServerRenderer.read (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29) at renderToString (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27) at Object.renderPage (/Users/bbakjun/workspace/reactNodeBird/front/node_modules/next/dist/next-server/server/render.js:50:851) at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:141:19)입니다 ㅠㅠ 오류가 발생하네요
1번이 문제인가해서 확인해봤는데 어떻게 봐야하는지 잘 모르겠습니다..
➜ front git:(bbakjun) ✗ npm ls react react-nodebird-front@1.0.0 /Users/bbakjun/workspace/reactNodeBird/front ├─┬ @ant-design/icons@4.6.2 │ ├─┬ rc-util@5.13.2 │ │ └── react@16.14.0 deduped │ └── react@16.14.0 deduped ├─┬ antd@4.16.7 │ ├─┬ rc-cascader@1.4.3 │ │ └── react@16.14.0 deduped │ ├─┬ rc-checkbox@2.3.2 │ │ └── react@16.14.0 deduped │ ├─┬ rc-collapse@3.1.1 │ │ └── react@16.14.0 deduped │ ├─┬ rc-dialog@8.5.2 │ │ └── react@16.14.0 deduped │ ├─┬ rc-drawer@4.3.1 │ │ └── react@16.14.0 deduped │ ├─┬ rc-dropdown@3.2.0 │ │ └── react@16.14.0 deduped │ ├─┬ rc-field-form@1.20.1 │ │ └── react@16.14.0 deduped │ ├─┬ rc-image@5.2.4 │ │ └── react@16.14.0 deduped │ ├─┬ rc-input-number@7.1.4 │ │ └── react@16.14.0 deduped │ ├─┬ rc-mentions@1.6.1 │ │ └── react@16.14.0 deduped │ ├─┬ rc-menu@9.0.12 │ │ ├─┬ rc-overflow@1.2.2 │ │ │ └── react@16.14.0 deduped │ │ └── react@16.14.0 deduped │ ├─┬ rc-motion@2.4.4 │ │ └── react@16.14.0 deduped │ ├─┬ rc-notification@4.5.7 │ │ └── react@16.14.0 deduped │ ├─┬ rc-pagination@3.1.7 │ │ └── react@16.14.0 deduped │ ├─┬ rc-picker@2.5.14 │ │ └── react@16.14.0 deduped │ ├─┬ rc-progress@3.1.4 │ │ └── react@16.14.0 deduped │ ├─┬ rc-rate@2.9.1 │ │ └── react@16.14.0 deduped │ ├─┬ rc-resize-observer@1.0.0 │ │ └── react@16.14.0 deduped │ ├─┬ rc-select@12.1.13 │ │ ├─┬ rc-virtual-list@3.3.0 │ │ │ └── react@16.14.0 deduped │ │ └── react@16.14.0 deduped │ ├─┬ rc-slider@9.7.2 │ │ └── react@16.14.0 deduped │ ├─┬ rc-steps@4.1.3 │ │ └── react@16.14.0 deduped │ ├─┬ rc-switch@3.2.2 │ │ └── react@16.14.0 deduped │ ├─┬ rc-table@7.15.2 │ │ └── react@16.14.0 deduped │ ├─┬ rc-tabs@11.9.1 │ │ └── react@16.14.0 deduped │ ├─┬ rc-textarea@0.3.4 │ │ └── react@16.14.0 deduped │ ├─┬ rc-tooltip@5.1.1 │ │ └── react@16.14.0 deduped │ ├─┬ rc-tree-select@4.3.3 │ │ └── react@16.14.0 deduped │ ├─┬ rc-tree@4.2.2 │ │ └── react@16.14.0 deduped │ ├─┬ rc-trigger@5.2.9 │ │ ├─┬ rc-align@4.0.9 │ │ │ └── react@16.14.0 deduped │ │ └── react@16.14.0 deduped │ ├─┬ rc-upload@4.3.1 │ │ └── react@16.14.0 deduped │ ├─┬ react-dom@16.14.0 │ │ └── react@16.14.0 deduped │ └── react@16.14.0 deduped ├─┬ next@9.5.5 │ ├─┬ @next/react-dev-overlay@9.5.5 │ │ └── react@16.14.0 deduped │ ├── react@16.14.0 deduped │ ├─┬ styled-jsx@3.3.0 │ │ └── react@16.14.0 deduped │ └─┬ use-subscription@1.4.1 │ └── react@16.14.0 deduped ├─┬ react-redux@7.2.4 │ └── react@16.14.0 deduped ├── react@16.14.0 └─┬ styled-components@5.3.0 └── react@16.14.0 deduped
4. WrappedApp created new store with withRedux(NodeBird) { initialState: undefined, initialStateFromGSPorGSSR: undefined }
이건 에러가 아닙니다.
Invalid Hook call이 문제인데요. 아마 return보다 아래에 use... 훅을 적으신 것 같습니다. return보다 위에 있어야 합니다.