인프런 커뮤니티 질문&답변
작성한 질문수
Network 표시와 action 표시
작성
·
194
0
1. 강사님처럼 Network 가 안뜨는데 이유가 뭘까요??
2. 그리고 예전에 밑에 그림처럼 콘솔에 액션이 뜨도록 설정했었잖아요, 제가 그 코드를 지웠다가 다시 하고싶어서 설정하려니 안되네요 왜이럴까요
강사님 화면
제 코드 입니다 (액션 표시가 안됨 ㅠ)
// configureStore.js
import { applyMiddleware, compose, createStore } from "redux";
import createSagaMiddleware from 'redux-saga';
import { createWrapper } from "next-redux-wrapper";
import { composeWithDevTools } from 'redux-devtools-extension';
import reducer from "../reducers";
import rootSaga from '../sagas';
// ex) 엄청 간단한 미들웨어:
const loggerMiddleware = ({ dispatch, getState }) => (next) => (action) => {
console.log(action) // action 을 실행하기 전에 console.log() 를 한번 실행해주는 미들웨어
return next(action);
}
const configureStore = () => {
const sagaMiddleware = createSagaMiddleware()
// const middlewares = [sagaMiddleware];
const middlewares = [sagaMiddleware, loggerMiddleware];
// enhancer: 리덕스의 기능이 확장된 것
const enhancer = process.env.NODE_ENV === 'production'
// 개발용 미들웨어와 배포용 미들웨어는 다름
? compose(applyMiddleware(...middlewares)) // 배포용
: composeWithDevTools(applyMiddleware(...middlewares)) // 개발용
const store = createStore(reducer, enhancer);
store.sagaTask = sagaMiddleware.run(rootSaga);
return store; // state , reducer 를 포함한 것
};
const wrapper = createWrapper(configureStore, {
debug: process.env.NODE_ENV === "development",
});
// configureStore 옆으로 두 번째 인자: optional 객체
// 개발시 다음과 같이 debug 를 true 로 하는 것이 설명도 뜨고 편리하다.
export default wrapper;
핫 리로딩을 위해 데브서버와 실시간으로 연결된 상태입니다.