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

This article mainly talks about "what is flux in react". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what is flux in react"?

React flux is a common state management scheme similar to vuex in react. It is an application architecture officially given by Facebook, which manages the common state in the form of one-way flow of data.

The operating environment of this paper: Windows7 system, react17.0.1, Dell G3.

What is react flux?

Flux in React

Flux is a common state management scheme similar to vuex in react. It is an application architecture officially given by Facebook, which manages the common state in the form of one-way flow of data. It is no longer recommended. However, in order to better understand the Redux scheme, it is still necessary to be familiar with the workflow of flux.

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

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:

The user interacts with the View layer to trigger Action

Component:

Update data

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)}

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

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

The View layer receives a 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.

......

Therefore, flux is no longer recommended at work. It was replaced by a relatively more complete solution: Redux.

At this point, I believe you have a deeper understanding of "what is flux in react". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.