Jun 개발노트

Redux Flux

January 16, 2020

Redux 정리

1. action creators

- 애플리케이션 상태를 바꾸고 싶다면 항상 액션을 보내는 방법(유일한 방법)

2. Store

- state tree 전체를 유지하는 역할
- Action이 들어오면 reducer에게 위임
- Flux에서 dispatch가 action을 각 store로 보내는 역할을 Redux에서는 store가 한다.

3. Reducers

- 리듀서는 원본의 복사본을 만들어 액션에 따라서 상태를 변경해준다.
- 리듀서가 여러가지라면 루트 리듀서를 만들어서 리듀서를 합쳐준다.

4. Component

- flux
1.  controller view
    - 스토어와 뷰 사이의 중간관리자같은 역할
    - 상태가 변경되었을때, 스토어가 전달하여 밑에 있는 뷰에게 상태를 전달
2.  thw view
    - 받은 데이터를 가지고 화면을 만드는 역할뿐
- Redux
1.  smart component
    - 액샌 처리를 책임
    - props를 통해 dumb에게 함수를 보내 dumb은 받은 함수를 통해서 호출할 뿐
    - dumb component 관리
2.  dumb component
    - 액션에 대한 직접 의존성을 가지지 않는다.
    - css style을 가진다(smart는 못가진다.)

5. view layer binding

  • 스토어와 뷰를 연결하기 위해 react-redux를 사용
  • Privider 컴포넌트 트리를 감싸는 컨포넌트 connect()를 이용해 루트 컴포넌트 밑의 컴포넌트들이 스토어에 연결
  • connect()는 react-redux가 제공하는 함수이다. 컴포넌트가 애플리케이션 상태 업테이트를 받고 싶은면 connect()를 이용해서 컴포넌트를 감싸주면 된다. 그러면 connect()가 selector를 이용해서 필요한 모든 연결을 만들어준다.
  • 셀렉터는 직접 만들어야 하는 함수이다. 애플리케이션 상태 안의 어느 부분이 컴포넌트에 props로써 필요한 것인지 지정

6. root component

  • 스토어를 생성하고 무슨 리듀서를 사용할지 알려주며, 뷰레이어 바인딩과 뷰를 불러온다.

Written by Junho You 배운것을 기록하자