Sample TODOMVC analysis of react and flux architectures
Through the analysis of FLUX-TODOMVC source code, learn how to build a Web program through react, understand the general steps of writing react application, while mastering flux's unidirectional data flow architecture idea
About react
One of the most appealing features of react is the component, which is modular, all components are independent, and can be nested to build larger components, and a small component is assembled to form a Web application, which allows me to start rethinking how to build a large web application.
About Flux
Flux is a thought rather than a framework, emphasizing the flow of data from top to bottom transfer concept, has a lot of implementation, more famous is REFLUXJS. One-way flow makes the data clearer: User UI interaction triggers events, event callbacks execute action, and all change data is passed in as parameter payload, and various stores take the data they need from payload to update and finally re-render the changed DOM nodes.
Analysis
Following a brief analysis of react + flux implementation of the TODOMVC source code, the main research on its construction and unidirectional data flow ideas, the specific code to do not do in-depth analysis.
Todoapp components
getInitialStates
set the initial value in;
componentDidMount
add store in to listen for specified events _onChange
;
componentWillUnmount
clears store-monitored events and callbacks in;
- In the
render
assign state to the prop of each component, the subassembly contains Header
components, MainSection
components, components Footer
;
- Adds an
_onChange
event callback method, executes when the callback is triggered, and setState
updates the UI.
The store is only accessible in top-level components, and subcomponents are passed through the prop layer, and all subcomponents do not retrieve data directly from the store, which is a good way to design and help reduce data coupling.
Header component
- The
render
component is included in TodoTextInput
, and its own _onSave
method as the TodoTextInput
prop of the component;
- Add
_onSave
a method that, when invoked, executes the corresponding action method create
.
Header
Component Unified management _onSave
method, which will be provided to the child component invocation.
Mainsection components
Prop Verification of the foundation
- Requires that a collection of objects be provided
- A Boolean value that asks whether to complete all;
In the render
classification process, when the data is empty, returns NULL, hides the element, displays the list contents when there is data, contains the TodoItem
component, and provides a CheckBox control to set whether to complete all;
Add a callback method to complete the toggle settings _onToggleCompleteAll
, and when called, execute the corresponding action method toggleCompleteAll
.
Footer Components
Prop Verification of the foundation
- Required to provide a collection of objects;
In the calculation of the render
number of unfinished items, and depending on whether a completed item exists to display the clear all complete button, the button binds the onClick
event;
Add a callback method that clears all completed items _onClearCompletedClick
and, when called, executes the corresponding action method destroyCompleted
.
Todoitem components
Prop Verification of the foundation
- The requirement item is not empty;
getInitialStates
set the initial value in;
In the render
according to whether the editing state, display different elements, edit state, contains the TodoTextInput
component, and set the onSave
value
prop, non-edit state, display the switch is completed button, bound the onChange
event, display the item text content, bound onDoubleClick
event, Show Delete button, bind onClick
event;
Add a callback method for whether the switch is complete _onToggleComplete
, and execute the corresponding action method when called toggleComplete
;
Add a callback method when you double-click the text, _onDoubleClick
when called, by setState
setting the current item as the edit State;
Adds a callback method that triggers the save, _onSave
executes the corresponding action method when invoked, updateText
and exits the setState
edit state by setting;
Add a callback method at the time of deletion, and _onDestroyClick
execute the corresponding action method when called destroy
;
Todotextinput components
Prop Verification of the foundation
- Requirements
className
, id
, placeholder
, value
as strings;
- Existence
onSave
Method
getInitialStates
set the initial value in;
render
returns the input text box in, binding multiple events onBlur
, onChange
onKeyDown
;
Adds a callback method when the focus is lost, _save
executes the method provided by the parent element when called, onSave
and calls SetState to clear the text;
Add a callback method when the content changes _onChange
, call SetState to update the virtual DOM and refresh the DOM element when called;
Add a callback method when the keyboard is pressed onKeyDown
, and when called, detects whether the ENTER key is pressed to execute the onSave
method;
The Todotextinput component relies only on the data and methods passed down by the parent through prop, and does not Action
Store
operate directly
Todoactions
- Externally provides an action method that accomplishes a specific function, and internally invokes the event dispatcher to
AppDispatcher
emit a specific action (carrying data payload
) and set payload
the actionType
type of action corresponding to it.
Appdispatcher
- Registering a centralized action management callback method
- Distribute the actions (
TodoActions
triggered in the specific method in).
AppDispatcher
Distribute both actions and the recipient of the actions, responsible for invoking the previously registered action management callback method after receiving the actions.
The action management callback method is based on a actionType
different operation and triggers the bound event at the end of the Operation TodoStore
.
Todostore
- Provides a method for adding and altering all data
- Registers an event callback function that fires the event manually after the data has changed.
Summarize
The react component is executed by triggering the Event,event callback function through user UI interaction, invoking the corresponding method of the action object in these functions, issuing the action, handling it after the event dispatcher receives the action, and then triggering the store to change the event. Re-renders DOM elements through setstate.
Take Todomvc as an example to complete the design of the application in two phases.
Initialization phase:
- Building top-level components and sub-components;
- Obtain Stroe data, step by step to the sub-component;
- Store-bound
change
events, when changes occur, update component data;
- Sub-components bind various events and respond to user actions;
- The event dispatcher registers an event-handling callback function when the action is received;
Interaction phase (with the addition of a TODO entry as an example):
- Triggers the DOM event on the subassembly, executes the callback function;
- Call the action method in the callback function;
- Action invokes the event dispatcher, issuing an action;
- The data in the action is passed by the event dispatcher to the event handler callback function registered in the initialization phase;
- The event handler callback function is processed according to different
actionType
;
- If data changes are involved in processing, manually trigger the event that the store binds during the initialization phase
change
;
- After the store receives the event, re-retrieves all the setstate methods that the data provides to the top-level component;
- The top-level component automatically calls the Render method to re-render the UI interface.
Data loops in the interactive phase
Event---Action--Dispatcher (carrying data)----------
Flux consists mainly of three parts: Dispatcher, store and views (react components), unlike traditional MVC (Model-view-controller). The dispatcher in flux exists in the form of Controller-view, and all data operations are performed in dispatcher callbacks and are reflected on the view. View is usually at the top of the app, which fetches data from stores and passes that data to its descendant nodes.
Resources
- Flux-todomvc
- Flux
- Refluxjs
- Flux-overview
Fork Me on Github
Sample TODOMVC analysis of react and flux architectures