FLUX구조의 흐름은 이해가 가지만 정확히 어떤 함수가 무슨 역활을 하며 어떻게 데이터를 넘겨주는지 이해가 되지 않아, 이해를 돕는 좋은 카툰이 있어서 이걸 보면서 하나하나 되짚어 보려고한다.

🔶 FLUX 구성별 역활

그림이 무척이나 귀엽다 ㅎㅎㅎ

🔹 Action Creator (액션생성자)

• Name : 액션 생성자
• Work : 모든 변경사항, 사용자와 상호작용이 거쳐가야 하는 액션의 생성을 담당한다.
• Required : True
  => 상태를 변경하거나 뷰를 업데이트 하고 싶다면 이 액션생성자를 생성해야 한다.
• Contents : TYPE, PAYLOAD
  • TYPE : "TYPE_CREATER","SET_TYPE" 등 시스템에 정의된 액션들
  • PAYLOAD : 상태변경에 관련된 내용들
• Next : 액션 함수를 작성한 후 디스패쳐로 넘겨준다.
• Example : 전보기사
  => 예를 들어 무슨 메세지를 보낼지 알려주면, 액션 생성자는 나머지 시스템이 이해할 수 있는 포맷으로 바꿔준다. 마치 전보기사가 알파벳을 모스부호로 바꿔주는 것 처럼.

🔹 Dispatcher (디스패쳐)

• Name : Dispacher

• Work : 액션생성자로 부터 액션이 넘어오면 여러 스토어에 액션을 보낸다.

• contents : callback function

• Next : 모든 스토어로 콜백함수 보내짐. 스토어는 일단 모든 액션을 받은 뒤 처리할지 말지 결정함.

• Example : 전화교환대 교환원
  => 예를 들어 전화교환대에 있는 모든 전화들과 연결이 가능해서 전보가 온곳에 알려줄 수 있다. 디스패쳐도 마찬가지로 액션을 보낼 수 있는 모든 store를 가지고 있고,액션 생성자로부터 액션이 넘어오면 여러 스토어에 액션을 보낸다.

  🔹 Store(스토어)

  

• Name : Store

• Work : switch statement를 사용해서 처리할 액션과 무시할 액션을 결정.

• contents : switch Statement

• Next : 스토어에 상태 변경을 완료하고 나면, 변경 이벤트(change event)를 내보낸다. 이 이벤트는 컨트롤러 뷰(the controller view)에 상태가 변경했다는 것을 알려주게 된다.

• Plus : 스토어에는 setter가 존재하지 않으므로, 정해진 절차인 액션생성자/디스패쳐 파이프라인을 거쳐서 액션을 보내야 한다.

• Example : 정부관료
  => 모든 상태 변경은 반드시 스토어에 의해서 결정되어야만 하며, 상태 변경을 위한 요청을 스토어에 직접보낼 수 없다.

  🔹 View (뷰)

  

• name : VIEW

• Work : 상태를 가져오고 유저에게 보여주고 입력받을 화면을 렌더링하는 역할. 애플리케이션 내부에 대해서는 아는 것이 없지만, 받은 데이터를 처리해서 사람들이 이해할 수 있는 포맷(HTML)으로 어떻게 바꾸는지 알고 있다.

• Example : 발표자
  => 받아온 모스부호와 암호들을 사람들에게 설명하는 발표자 같은 역활이다.

  🔶 FLUX 데이터 흐름

  

  1. 뷰는 Action 생성자에게 Action을 준비하라고 말한다.
  2. 액션 생성자는 액션함수를 만들어 Dispacher에게 전달한다.
  3. 디스패쳐는 액션함수를 받아 순서에 맞게 STORE에게 전달한다. 각 스토어는 모든 액션을 받는다.
  4. 스토어는 TYPE에 맞는 액션만 받아 변경사항을, 자신을 구독하고 있는 Controller View에게 전달한다.
  5. 컨트롤 뷰는 자신아래의 모든 뷰에게 새로운 상태에 맞게 랜더링하라고 알려준다!

  🔶 내 식대로 FLUX 이해하기

• Action

  • 전역 state를 만든다고 하면 만드는 주문서임. TYPE / PAYLOAD가 필요한데, 타입은 관습적으로 대문자/언더바 로 쓴다고함.
  • 전역 state를 쓴다고 이름을 지었으니까 이걸 누군가에게 알려야 이게 상태도 바뀌고 딴 사람들도 알음. 그래서 Dispacher라는 애한테 보냄.

• Dispatcher

  • 우리가 아까 Action함수한테 전역 state로 뭐쓴다고 받았잖씀? 맞지?
  • 근데 이게 고정된값일수도 있는데, 대부분 async로 데이터를 받아서 데이터가 null => data이렇게 들어오거나,우리가 많이 쓰는 counter 함수에서 클릭 누를떄마다 state 바뀌잖아. 근데 그게 전역 state로 쓴다고하면 state가 겁나 계속 바뀌잖씀?
  • 그래서 이 바뀐다는걸 알려주는 함수임. dispatch 함수를 사용해 어떻게 바뀔건지 콜백함수를 써서 상태를 변경해줌.

• Store

  • dispatcher에서 열심히 값을 바꿔줬어. 근데 우리가 아까 action 함수 보내서 뭐 전역변수 이름어케 쓰고 값 머 넣을건지 명시했잖아?
  • 그게 store가 되는거임. 그 전체가.
  • 만약에 dispatcher에서 dispatch함수를 전달받았는데 store의 액션타입이 100 개있는데, 10개만 dispath함수만 전달받았으면 100개 갖고있는 store는 10개만 바꿔주는 역활을 함.

• View

  • store에서 상태가 변했으니까 store는 자신을 구독하고 있는 view에 변경되었다는걸 알려줌. 그럼 view 는 변한 값을 사용자에게 보여줌.

  ---

  아따 겁나 이해하는데 오래걸림.. 내가 짠 코드 매칭시키는 포스팅 다음에 올릴꺼임

  ◼ 참조 및 출처
  [Flux로의 카툰 안내서 (이거 진짜 도움 많이됨 ㅜㅜ! )]
  https://bestalign.github.io/translation/cartoon-guide-to-flux/