Shulou(Shulou.com)06/02 Report--

What is the meaning of flux in react, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

In react, flux is a common state management scheme, which is used to build the application architecture of client-side Web applications, and uses the one-way flow of data to manage the common state.

The operating environment of this tutorial: Windows7 system, react17.0.1 version, Dell G3 computer.

What is flux?

Flux is a common state management scheme similar to vuex in react. It is an application architecture officially given by Facebook to build client-side Web applications. It manages the common state in the form of one-way data flow.

It is more like a pattern than a formal framework, and developers don't need much new code to get started with Flux quickly.

Install using cnpm i flux-S.

The composition of flux

View: view layer

Action: messages from the view

Dispatcher: dispatcher, which is used to receive Action and execute callback function

Store: data layer, storage status, once changed

The workflow of flux

The workflow of flux

When flux updates data, it goes through the following steps:

The user interacts with the View layer to trigger Action

Action uses dispatcher.dispatch to send Action's own status to dispatcher

Dispatcher registers the event through register, and then triggers the corresponding Store callback to update through the type passed in by Action.

Update the data in Store and trigger the View layer event to synchronize the update.

The View layer receives a signal to update

Expand in detail in the form of code:

1. The user interacts with the View layer to trigger Action

Component:

Update data

2. Action uses dispatcher.dispatch to send Action's own status to dispatcher

Component:

/ / the callback function handler () {/ / action of the step 1 event is a description that defines a unique constant that describes how your data is changed. Let action = {type: "NUM_ADD"}; dispatcher.dispatch (action)}

3. Dispatcher registers the event through dispatcher.register, and then triggers the corresponding Store callback to update through the type passed in by Action.

The flux that the Dispatcher constructor depends on needs to be downloaded separately: cnpm i flux-S

In the dispatcher file:

Import {Dispatcher} from 'flux'import store from'. / index'const dispatcher = new Dispatcher (); / / register method registers an event that triggers the corresponding Store callback to update dispatcher.register ((action) = > {switch (action.type) {case "NUM_ADD": / * call the method defined in the corresponding store * / store.handleAdd (); break) Case "Num_REDUCE": store.handleReduce () break;}}) export default dispatcher

4. Update the data in Store, and trigger the View layer event to synchronize the update.

Encapsulation of event subscription object: encapsulation of Observer event mechanism

In the store file:

Import observer from'.. / observer'let store = Object.assign (observer, {state: {state 10}, getState () {return this.state;}, / / the corresponding processing method of action in store, updates the data of store and triggers the method handleAdd () {this.state.n + +; this.$emit ("update")},}) export default store

5. The View layer receives the signal to update.

Use $on to subscribe to events in constructor, and define a method to do status updates as callback:

Component:

/ / make an event subscription here so that the view gets the callback of updating constructor () {super (); this.state = store.getState (); store.$on ("update", this.handleUpdate.bind (this))} / /. / / event subscription, update the view method handleUpdate () {this.setState (store.getState ());}

At this point, the method triggered in step 4 is executed here, and the data is updated. The process of updating data in a complete flux system is completed.

Shortcomings of flux

Frequent introduction of store

The split of UI components and container components is too complex

Unable to manage multiple store

Each component that needs to update the view needs to bind the update function.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.