On the development of flux

On the development of flux

Some time ago, wrote a document about React: React: The life cycle of the component, in more detail the life cycle of the next React component.

Said React, it is easy to associate with Flux. Today, React Introduction and practical tutorial of the demo as an example, a brief talk about the development of Flux.

What is flux?

Flux is a front-end architecture for Facebook users to build client Web applications that complements React's combined view components with a one-way data stream.

Design structure of Flux

The Flux architecture has three main parts: Dispatcher, Store, and view (React components). The store contains all the data for the app, Dispatcher is responsible for scheduling, replacing the controller in MVC, and when the Action is triggered, determines how the Store updates. When the store changes, the View is updated at the same time, and you can generate an action that is handled by dispatcher. This ensures that the data flows in one direction between the system components. When the system has more than one store and view, it can still be considered as only a store and a view, because the data flows only in one direction, and the different store and view do not directly affect each other.

Simple development of flux

In the demo of the color tray, the component partition of the interface is this:

The user generates a action,action on Colorpanel (view) to stream the data to Dispatcher,dispatcher update the store with the data passed by the Action, and when the store changes, View is updated.

(If you want to get the source code of this article, you can stamp this: Flux-demo)

Store

The

Store contains all the data for the app and is responsible for updating View (Colorpanel), simplifying the definition of store for simplicity:

letrequire(‘events‘).EventEmitter;letnew EventEmitter();exportlet colorStore = {    colorId1,    listenChange(callback){        emitter.on(‘colorChange‘, callback);    },    getColorId(){        returnthis.colorId    },    setColorId(colorId){        this.colorId = colorId;        emitter.emit(‘colorChange‘);    }};

Dispatcher

Action relies on Dispatcher to dispatch, to update the store, and to have a store to update the corresponding View component. Define a colordispatcher for scheduling:

import‘flux‘;import‘./colorStore‘;exportletnew Dispatcher();colorDispatcher.register((payload) => {    switch (payload.action){        case ‘CHANGE_COLOR_ID‘:            colorStore.setColorId(payload.colorId);            break;    }});

Action

When the mouse hovers over a color box in Colorbar, Colordisplay displays the corresponding color, depending on the color box ID change. We define an Action for change_color_id:

import‘./colorDispatcher‘;exportlet colorAction = {    changeColorId(colorId){        colorDispatcher.dispatch({            action‘CHANGE_COLOR_ID‘,            colorId: colorId        })    }};

The proposed Action defined is in compliance with the FSA specification.

View

By dividing the components, we render the interface:

Colordisplay:

Import React, {Component} from' react '; class colordisplay extends Component {Shouldcomponentupdate (Nextprops, nextstate) {return  This. props.selectedColor.id!== NextProps.selectedColor.id; } render () {return(<DivClassName =' Color-display '> <DivClassName = { This.props.selectedcolor.value}> { This. Props.selectedColor.title} </Div> </Div>)}}exportdefaultColordisplay;

Colorbar:

ImportReact, {Component} from' react ';Import{Coloraction} from'. /flux/coloraction ';Import{Colorstore} from'. /flux/colorstore '; class colorbar extends Component {Handlehover (Colorid) {Let Precolorid = Colorstore.getcolorid ();if(Precolorid! = Colorid)        {Coloraction.changecolorid (Colorid); }} render () {return(<ul> {/ * Reaact in the loop render elements, you need to use the key property to ensure proper rendering, the key value is unique * /}                { This. props.colors.map (function (color) {return(<li key = {Color.id} onMouseOver = { This. Handlehover.bind ( This, color.id)} className = {color.value}> </li> )                }, This)} </ul>)}}exportdefaultColorbar;

Colorpanel:

ImportReact, {Component} from' react ';ImportColordisplay from'./colordisplay ';ImportColorbar from'./colorbar ';Import{Colorstore} from'. /flux/colorstore ' class colorpanel extends Component {Constructor (props) {Super(props); This. State = {Selectedcolor: This. Getselectedcolor (Colorstore.getcolorid ())}; Colorstore.listenchange ( This. Oncolorhover.bind ( This)); } getselectedcolor (Colorid) {if(! Colorid) {return NULL} Let length = This. props.colors.length; Let I; for(i =0; i < length; i++) {if( This. props.colors[i].id = = = Colorid) { Break; }        }return  This. Props.colors[i]; } shouldcomponentupdate (Nextprops, nextstate) {return  This. state.selectedColor.id!== NextState.selectedColor.id; } render () {return(<div> <colordisplay Selectedcolor = { This. state.selectedcolor}/> <colorbar colors = { This. props.colors}/> </div>)} oncolorhover () {Let Colorid = Colorstore.getcolorid ( ); This. SetState ({selectedcolor: This. Getselectedcolor (Colorid)})}}colorpanel.defaultprops = {colors: [{ID:1, Value:' Red ', Title:' Red '}, {ID:2, Value:' Blue ', Title:' Blue '}, {ID:3, Value:' Green ', Title:' Green '}, {ID:4, Value:' Yellow ', Title:' Yellow '}, {ID:5, Value:' Pink ', Title:' Pink '}, {ID:6, Value:' Black ', Title:' Black '}]};exportdefaultColorpanel;

APP:

varrequire(‘react-dom‘);import‘react‘;import‘./panel/colorPanel‘;require(‘./app.css‘);windowfunction () {    document.getElementById(‘demos‘));}

The final interface is as follows:

Summarize

This article simply said how to use Flux to develop practical applications, for the application of low load requirements, Flux is fully available, complex rich applications can be built with the help of Redux + React, Redux responsible for data distribution and management, its data flow controllability more powerful than Flux, React is still responsible for View, but the two are not directly connected, need to rely on React-redux.

If you want to get the source code of this article, you can stamp this: Flux-demo

Original source:http://www.ido321.com/1658.html

On the development of flux