React용 아키텍처 모드 - Flux

1278 단어 ReactJavaScriptflux
플렉스에 대한 개념을 배우고 싶어서 다양한 기사를 읽고 스스로 정리해봤어요.
폭스 원소
1、View(ReactComponent)
2、Action
3、Dispatcher
4、Store
어쨌든 이 네 개만 기억하면 돼.

1、View(React)


· Store 데이터 표시뷰

2、Action


· 사용자가 진행하는 조작은 Action을 통해 Dispatcher에 전달된다.

3、Dispatcher


· Action을 수락하고 등록된 콜백을 실행하고 이벤트를 Store에 알립니다.모든 데이터가 Dispatcher를 통과하면

4、Store


・ 응용 프로그램의 데이터와 비즈니스 논리를 담당한다.Store의 데이터가 업데이트된 경우,change 이벤트를 발행하여 React의 구성 요소 트리에 업데이트를 알립니다.

https://github.com/facebook/flux
↑ 흔한 그림

프로세스 처리


·View에서 발생한 사용자의 작업은 Action을 통해 Dispatcher를 호출합니다.
· Store의 처리를 디스패치의 호출로 호출한다.
· Store 프로세스가 완료되면 Change Event emit 를 사용합니다.
・View listen Store의 Change Event, Change Event를 받은 후 자체 state를 업데이트합니다.
이상.
해보지 않으면 뭐라 할 수 없으니까 일단 해보려고요.
https://github.com/yhikishima/Flux-env

좋은 웹페이지 즐겨찾기