Sample TODOMVC analysis of react and flux architectures

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

• getInitialStatesset the initial value in;
• componentDidMountadd store in to listen for specified events _onChange ;
• componentWillUnmountclears 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 .

HeaderComponent 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;

• getInitialStatesset 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 onDoubleClickevent, 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

• getInitialStatesset the initial value in;

• renderreturns 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).

AppDispatcherDistribute 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:

1. Building top-level components and sub-components;
2. Obtain Stroe data, step by step to the sub-component;
3. Store-bound change events, when changes occur, update component data;
4. Sub-components bind various events and respond to user actions;
5. 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):

1. Triggers the DOM event on the subassembly, executes the callback function;
2. Call the action method in the callback function;
3. Action invokes the event dispatcher, issuing an action;
4. The data in the action is passed by the event dispatcher to the event handler callback function registered in the initialization phase;
5. The event handler callback function is processed according to different actionType ;
6. If data changes are involved in processing, manually trigger the event that the store binds during the initialization phase change ;
7. After the store receives the event, re-retrieves all the setstate methods that the data provides to the top-level component;
8. 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