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

Question

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));

terecal · Answer

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

제로초(조현영) · Answer

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

terecal · Answer

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 인것일까여?

제로초(조현영) · Answer

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

terecal · Answer

강의 들으면서 쿠키 확인하고 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

제로초(조현영) · Answer

새로고침시(서버사이드렌더링)인지 클라이언트사이드렌더링인지 구분먼저 해주셔야 합니다. 서버사이드렌더링인 경우에는 react-devtools에 액션이 찍히지 않습니다.(서버쪽에서 처리되기 때문에) 이 때는 쿠키가 서버로 제대로 전달되는지 확인해야 하고요. 클라이언트사이드렌더링인 경우에는 react-devtools에 액션이 찍힙니다.