반응형

React -- Flux 개념 정리



참고 : https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture

          http://blog.andrewray.me/the-reactjs-controller-view-pattern/

          http://stackoverflow.com/questions/33366161/what-is-a-controller-view-in-the-flux-architecture

          https://github.com/facebook/flux/blob/master/src/Dispatcher.js  ==> Dispatcher.js 소스보기

          https://facebook.github.io/flux/docs/actions-and-the-dispatcher.html#content  ==> Actions and the Dispatcher


          https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture  ==> Getting To Know Flux, the React.js Architecture


         http://tylermcginnis.com/reactjs-tutorial-pt-3-architecting-react-js-apps-with-flux/  

              ==>React.js Tutorial Pt 3: Architecting React.js Apps with Flux.

         https://github.com/tylermcginnis/Flux-Todolist  ==> 위 블로그 소스


         http://www.sitepoint.com/creating-note-taking-app-react-flux/

         http://jonathancreamer.com/what-the-flux/


         http://andrewhfarmer.com/component-communication/

         http://andrewhfarmer.com/react-ajax-best-practices/





Flux


It's more of a pattern rather than a formal framework


three major parts: the dispatcher, the stores, and the views (React components). 




                                                                        dispatch(action) 

Action        action creator                           store 가 등록한 callbacks 실행          

new data -----------------> dispatcher ------------------------------------> propagate that data to all of the stores

( click)                                                                                (action)

(server data)



       emit a change event

---------------------------------> controller-views




Action ( = payload )

 data + specific action type 로 구성된 object.

  -- Action 이 다르면, type 도 다르다.



Different actions are identified by a type attribute. 



Action creator 

  --> create the action object, 

  --> pass the action to the dispatcher.




The dispatch() method provides a simple, synchronous iteration through the callbacks, invoking each in turn.


When waitFor() is encountered within one of the callbacks, execution of that callback stops and waitFor() provides us with a new iteration cycle over the dependencies. 




Dispatcher
  

-- a singleton, and operates as the central hub of data flow in a Flux application.

-- a registry of callbacks, and can invoke these callbacks in order. 

-- 각각의 store 는 dispatcher 에 callback 함수를 등록한다.

-- simple mechanism for distributing the actions to the stores


dispatcher is a sort of global pub/sub handler that broadcasts payloads to registered callbacks.




Store


** stores ; hold the application's data and business logic

            ==> 이후 view 갱신 발생한다.


            ; Stores have no direct setter methods like setAsRead()



** When an action creator provides the dispatcher with a new action, all stores in the application receive the action via the callbacks in the registry.


 it can be used to manage dependencies between the stores by invoking the registered callbacks in a specific order. 




View (React components)

-- controller-views  

     ; views often found at the top of the hierarchy that retrieve data from the stores and pass this data down to their children. 




























반응형

'React, React Native' 카테고리의 다른 글

react -- babel 설정 기초  (0) 2016.05.17
React -- Redux 기본 개념 정리  (0) 2016.05.07
React -- 기초 개념 정리  (0) 2016.04.18
React -- WebStorm 10 설정하기  (0) 2016.04.18
React -- 주요 변천사 살펴보기  (0) 2016.04.18
Posted by 자유프로그램
,