-
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
_app.js에서 LOAD_USER_REQUEST 액션이 디스패치 되지 않아요
19.11.27 16:34 작성 조회수 217
0
에러도 안나고 콘솔메세지도 찍히는데
리덕스 데브 툴즈에는 일단 액션 날라가는게 없고
회원 정보도 다시 안불러와서여
// front\pages\_app.js
import React from 'react';
import Head from 'next/head';
import AppLayout from '../components/AppLayout';
import withRedux from 'next-redux-wrapper';
import reducer from '../reducers';
import { Provider } from 'react-redux';
import createSagaMiddleware from 'redux-saga';
import rootSaga from '../sagas';
import { applyMiddleware, compose, createStore } from 'redux';
import PropTypes from 'prop-types';
import withReduxSaga from 'next-redux-saga';
import { LOAD_USER_REQUEST } from '../reducers/user';
import axios from 'axios';
const NodeBird = ({ Component, store, pageProps }) => {
return (
<Provider store={store}>
<Head>
<title>NodeBird</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.20.5/antd.css" />
<link rel="stylesheet" type="text/css" charSet="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
</Head>
<AppLayout>
<Component {...pageProps} />
</AppLayout>
</Provider>
)
}
NodeBird.propTypes = {
Component: PropTypes.elementType.isRequired,
store: PropTypes.object.isRequired,
pageProps: PropTypes.object.isRequired,
};
NodeBird.getInitialProps = async (context) => {
// console.log(context);
const { ctx, Component } = context;
let pageProps = {}
const state = ctx.store.getState();
const cookie = ctx.isServer ? ctx.req.headers.cookie : '';
axios.defaults.headers.Cookie = '';
if (ctx.isServer && cookie) {
axios.defaults.headers.Cookie = cookie;
}
if(!state.user.me) {
console.log("ctx : " , ctx);
ctx.store.dispatch({
type: LOAD_USER_REQUEST,
});
console.log("유저 정보 불러 오기2");
}
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx) || {};
}
// console.log("pageProps : " , pageProps);
return { pageProps };
};
const configureStore = (initialState, options) => {
const sagaMiddleware = createSagaMiddleware();
const middlewares = [sagaMiddleware];
const enhancer = process.env.NODE_ENV === 'production'
? compose(applyMiddleware(...middlewares))
: compose(
applyMiddleware(...middlewares),
!options.isServer && typeof window.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined' ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f,
);
const store = createStore(reducer, initialState, enhancer);
// sagaMiddleware.run(rootSaga);
store.sagaTask = sagaMiddleware.run(rootSaga);
return store;
};
export default withRedux(configureStore)(withReduxSaga(NodeBird));
답변을 작성해보세요.
0
terecal
질문자2019.11.27
크롬 초기화하고 히스토리 삭제하고 그러니까 되여 이게 쿠키 문제가 맞는거 같아여 다른 서버랑 혼선이 생기는거 같기도 한데 왜 그런지 정확히 몰겠 ;; ㄳㄳ ~!
0
0
terecal
질문자2019.11.27
GET /api/user/ 401 7.757 ms - 29
Executing (default): SELECT `Post`.`id`, `Post`.`content`, `Post`.`createdAt`, `Post`.`updatedAt`, `Post`.`UserId`, `Post`.`RetweetId`, `User`.`id` AS `User.id`, `User`.`nickname` AS `User.nickname`, `Images`.`id` AS `Images.id`, `Images`.`src` AS `Images.src`, `Images`.`createdAt` AS `Images.createdAt`, `Images`.`updatedAt` AS `Images.updatedAt`, `Images`.`PostId` AS `Images.PostId`, `Likers`.`id` AS `Likers.id`, `Likers->Like`.`createdAt` AS `Likers.Like.createdAt`, `Likers->Like`.`updatedAt` AS `Likers.Like.updatedAt`, `Likers->Like`.`PostId` AS `Likers.Like.PostId`, `Likers->Like`.`UserId` AS `Likers.Like.UserId`, `Retweet`.`id` AS `Retweet.id`, `Retweet`.`content` AS `Retweet.content`, `Retweet`.`createdAt` AS `Retweet.createdAt`, `Retweet`.`updatedAt` AS `Retweet.updatedAt`, `Retweet`.`UserId` AS `Retweet.UserId`, `Retweet`.`RetweetId` AS `Retweet.RetweetId`, `Retweet->User`.`id` AS `Retweet.User.id`, `Retweet->User`.`nickname` AS `Retweet.User.nickname`, `Retweet->Images`.`id` AS `Retweet.Images.id`, `Retweet->Images`.`src` AS `Retweet.Images.src`, `Retweet->Images`.`createdAt` AS `Retweet.Images.createdAt`, `Retweet->Images`.`updatedAt` AS `Retweet.Images.updatedAt`, `Retweet->Images`.`PostId` AS `Retweet.Images.PostId` FROM `Posts` AS `Post` LEFT OUTER JOIN `Users` AS `User` ON `Post`.`UserId` = `User`.`id` LEFT OUTER JOIN `Images` AS `Images` ON `Post`.`id` = `Images`.`PostId` LEFT OUTER JOIN ( `Like` AS `Likers->Like` INNER JOIN `Users` AS `Likers` ON `Likers`.`id` = `Likers->Like`.`UserId`) ON `Post`.`id` = `Likers->Like`.`PostId` LEFT OUTER JOIN `Posts` AS `Retweet` ON `Post`.`RetweetId` = `Retweet`.`id` LEFT OUTER JOIN `Users` AS `Retweet->User` ON `Retweet`.`UserId` = `Retweet->User`.`id` LEFT OUTER JOIN `Images` AS `Retweet->Images` ON `Retweet`.`id` = `Retweet->Images`.`PostId` ORDER BY `Post`.`createdAt` DESC;
GET /api/posts 200 25.844 ms - 687
이렇게 찍히는데여 401 인것일까여?
0
0
terecal
질문자2019.11.27
강의 들으면서 쿠키 확인하고 ctx 확인 하고 그안의 dispatch 함수도 확인했습니다
_app.js의 로그로 확인했어여 AppLayout.js 의
LOAD_USER_REQUEST는 지웠어여
그걸 못하는거 같아여
디스 패치를 안날리는게 디스패치 자체가 잘못된걸까여
깃허브:
https://github.com/hyunsokstar/node_bird_22/tree/master/front
0
조현영
지식공유자2019.11.27
새로고침시(서버사이드렌더링)인지 클라이언트사이드렌더링인지 구분먼저 해주셔야 합니다.
서버사이드렌더링인 경우에는 react-devtools에 액션이 찍히지 않습니다.(서버쪽에서 처리되기 때문에) 이 때는 쿠키가 서버로 제대로 전달되는지 확인해야 하고요.
클라이언트사이드렌더링인 경우에는 react-devtools에 액션이 찍힙니다.
답변 6