Redux and Architecture

redux

redux란?

• redux는 flux의 구현체이다. [flux]

redux의 3가지 원칙

1. Single Source of Truth (단 하나의 진실의 근원)
2. State is read-only (State는 읽기전용이다)
3. Changes are made with Pure Functions (변화는 순수 함수로 만들어져야 한다)

redux 들어가기 전, 개념 미리보기

1. 액션 (Action)
   • 변화가 필요할 때, 우리는 액션이란 것을 발생시킨다.
   • 액션 객체는 type 필드를 필수적으로 가지고 있어야한다.
2. 액션 생성함수 (Action Creator)
   • 파라미터를 받아와서 액션 객체 형태로 만들어준다.
3. 리듀서 (Reducer)
   • 리듀서는 두가지의 파라미터(state, action)를 받아온다.
   • 리듀서는, 현재의 상태와, 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환한다.
4. 스토어 (Store)
   • 스토어 안에는, 현재의 앱 상태와, 리듀서가 들어가있고, 추가적으로 몇가지 내장 함수들이 있다.
5. 디스패치 (dispatch)
   • 디스패치는, 액션을 발생 시키는 것이다. dispatch 라는 함수에는 액션을 파라미터로 전달한다.
   • 그렇게 호출을 하면, 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어준다.

Architecture

• 보통 redux를 쓸 때, 아래와 같은 구조를 추천하는 것 같다.

.
├── public
└── src
    ├── component
    ├── action
    ├── reducer
    └── store

1. action 폴더
   • API 통신과 같은 작업을 하는 액션 메서드(action creator)를 모아 둔 폴더
   • 액션 메서드에서는 리듀서(reducer)로 데이터 생성을 요청한다.
2. component 폴더
   • React 컴포넌트로 구성된 폴더다. 컴포넌트는 보통 도메인별로 구분돼 있다.
3. reducer 폴더
   • 리듀서는 액션 메서드에서 변경한 상태를 받아 기존의 상태를 새로운 상태로 변경하는 일을 한다.
4. store 폴더
   • store폴더에는 index.js 파일 하나만 있으며, 주로 미들웨어를 설정하는 일을 한다.

• ducks 구조

참고 링크: Redux로의 카툰 안내서 - bestalign’s dev blog