• 카테고리

    질문 & 답변

  • 세부 분야

    풀스택

  • 해결 여부

    미해결

_app.js에서 LOAD_USER_REQUEST 액션이 디스패치 되지 않아요

19.11.27 16:34 작성 조회수 217

0

ctx 내에 store와 dispatch 다 있고
에러도 안나고 콘솔메세지도 찍히는데

리덕스 데브 툴즈에는 일단 액션 날라가는게 없고
회원 정보도 다시 안불러와서여


    if(!state.user.me) {
        console.log("ctx : " , ctx);
        ctx.store.dispatch({
            type: LOAD_USER_REQUEST,
        });
        console.log("유저 정보 불러 오기");
   }
front/pages/_app.js 전체 코드
// 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));
course-thumbnail

React로 NodeBird SNS 만들기

7-2. SSR을 위해 쿠키 넣어주기

강의실 바로가기

답변 6

·

답변을 작성해보세요.

0

terecal님의 프로필

terecal

질문자

2019.11.27

크롬 초기화하고 히스토리 삭제하고 그러니까 되여 이게 쿠키 문제가 맞는거 같아여 다른 서버랑 혼선이 생기는거 같기도 한데 왜 그런지 정확히 몰겠 ;;  ㄳㄳ ~!

0

조현영님의 프로필

조현영

지식공유자

2019.11.27

네 401(로그인되지 않음)이니까 쿠키문제 같네요. 쿠키가 서버로 전달되지 않아 로그인되지 않았다고 뜨는 것 같습니다.

0

terecal님의 프로필

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

조현영님의 프로필

조현영

지식공유자

2019.11.27

서버쪽 콘솔에는 요청 기록 안 되나요? LOAD_USER에 대한 router 요청이 기록되어야 합니다.

GET /user 이런 거요.

0

terecal님의 프로필

terecal

질문자

2019.11.27

강의 들으면서 쿠키 확인하고 ctx 확인 하고 그안의 dispatch 함수도 확인했습니다

    if(!state.user.me) {
        console.log("ctx : " , ctx);
        ctx.store.dispatch({
            type: LOAD_USER_REQUEST,
        });
        console.log("유저 정보 불러 오기2");
   }
유저 정보 불러오기2 메세지도 찍히는데여 쿠키는
_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에 액션이 찍힙니다.

이 글과 비슷한 Q&A