redux 사이클과 구조

오늘은 redux안에서 action과 데이터가 어떻게 흐르는지 이해하고 미들웨어를 통한 사이클을 정리해보려 한다..! 그림으로 보면 아래와 같다.

출처; https://stackoverflow.com/questions/51610872/storing-to-redux-on-page-load/51611975

middleware

action은 dispatch 이후 여러 middleware를 먼저 통과한 후 reducer에 도달한다. 이때 중간에 있는 함수들을 middleware라고 한다. ex. redux-thunk, redux-logger

dispatch.(action) =====|middleware|=====> reducer

위와 같이 dispatch를 통해서 action이 전달된 reducer는 상태를 수정하는 것이 아닌 전체를 변경시키는 방식으로 store에 저장되는데, useState의 값을 변경했던 것과 같이 우리에게 익숙한 방식이다. { ...state } 와 같은 방식으로 반환해준다..!

state

그래서 우리는 상태를 어떻게 불러올 수 있을까? 바로 selector를 통해서 가져올 수 있다. store에 있는 state를 selector를 통해서 불러오고, 이를 또 event에 전달하는 방식의 사이클이 돌아간다고도 할 수 있다.

redux 구조

그렇다면 redux 구조는 어떻게 해야할까..? 초기에 redux를 사용하는 것 뿐만 아니라 파일 구조를 세우는 것도 매우 골치아팠다. 다음 그림은 네이버 개발 블로그에서 참조한 폴더 구조다. React와 Redux를 함께 사용하는 프로젝트에서 사용할 수 있게 redux-book의 폴더 구조를 기준으로 한것이다.

📂 action/

action 폴더는 애플리케이션에서 사용하는 action.type과 API 통신과 같은 작업을 하는 액션 메서드(action creator)를 모아 둔 폴더다. 나의 경우에는 action의 타입을 따로 떼어내 actionTypes 파일을 새로 지정해주었다. 그렇게 하면 type이 늘어났을 경우 관리하기가 수월해진다..!

📂 reducer/

주로 reducer와 그런 reducer들을 combine하는 index 파일로 구성되어 있다. reducer 폴더는 action 폴더와 같이 하나로 만들기도 하지만 도메인별로 구분해 만들기도 한다. 액션 파일과 리듀서 파일을 합쳐서 사용하는 것을ducks 기법이라고 한다. 보통 ducks 기법을 사용할 때는 action의 이름에 접두사를 넣음으로써 다른 모듈과 액션 이름이 중복되는 것을 방지 할 수 있다. 만약 reducer 파일의 개수가 많아진다면 ducks 기법을 사용하는 것을 고려할 수 있다.

📂 store/

store 폴더에는 index.js 파일 하나만 있으며, 주로 middleware를 설정해준다. 나의 경우에는 applymiddleware를 통해 redux-thunk나, logger를 설정해주었다. 또는 디버깅을 위해 react-devtool을 설정할 수 있다.

위와 같이 redux의 주기와 구조에 대해서 정리를 잠깐 해보았다.. 공부를 하면 할 수록.. 구조라는 것이 정말 정말 중요하고 어렵다는 것을 깨닫는다.. 이제 앞으로 시작하는 프로젝트도 소통을 통해서 좀 더 탄탄한 베이스로 시작할 수 있도록 해야지..! 파일 세팅과 관련해서는 Atomic Design Pattern이란 것이 있는데.. 이것은 추후에 다뤄보도록 하겠다..!