Next.js에서 redux devtools를 사용하면 크롬 개발자도구를 이용해 리덕스의 값이 변화하는 것을 콘솔로 볼 수 있다. Nextjs에서 redux를 이용하여 authentication 기능을 구현하는 과정에서 redux devtools를 적용한 코드를 보았는데 리덕스 미들웨어를 어떻게 세팅해야 하는지 공부하기 위해서 다시 정리해보았다.
아래는 2020년 1월 자료로 더 간결하다고 한다.
https://likejirak.tistory.com/130
https://likejirak.tistory.com/130
위의 블로그 내용을 보면 applyMiddleware를 통해 미들웨어들을 적용한다음 이를 composeWithDevTools로 redux devtools를 합성한다. 이렇게 만든 enhancer를 createStore의 인자로 넣어준다.
그리고 withRedux(()=> {}) ( Root ) 로 첫번째 괄호에 initStore하는 함수를 넣어주는 방식으로 withRedux를 사용하였다.
내가 공부한 자료의 코드는 20년도 이전의 자료로 클래스형 컴포넌트로 작성되어 있었고 store는 코드가 나뉘어 작성하고 _app.js(위 코드에서는 Root)에서 리덕스를 연결해주었다.
enhancer가 들어갈 세번째 인자 부분에 composeWithDevTools(~~)가 들어가 바로 createStore를 한 것을 볼 수 있다. applyMiddleware의 인자는 thunkMiddleware(보통의 액션생성자는 그냥 하나의 액션객체를 생성할 뿐이지만 redux-thunk를 통해 만들게 되면 그 내부에서 여러가지 작업을 할 수도 있습니다.)와 logger(redux의 상태를 로그로 보여주는 모듈)를 미들웨어로 전달하였다.
또한, reducers로 여러 개의 리듀서가 만들어질 것을 대비하여 combineReducers에 {auth: authReducer}를 넣어 Reducers를 createStore의 첫번째 인자에 전달했다.
이 코드에서는 initStore라는 함수만 만들어 export해준다음 _app.js에서 import하여 "export default withRedux(initStore)(MyApp);"과 같이 첫번째 괄호에 initStore하는 함수가 들어가는 것을 볼 수 있다.