A global data flow is used for frontend data management. For multiple components that need to share a state, it is difficult to transfer the state among them. To resolve this issue, you can extract the shared state and use a global data flow to transfer it to all related components.

Principles

In a global data flow, global data is transferred in a globally unique way. Once the data declared in global data changes, the data flow shown in the following figure is executed.

  1. A component triggers an action when, for example, a user clicks the component.
  2. The action triggers global data changes.
  3. Upon the global data changes, components that reference the global state are automatically re-rendered.

Scenarios

A global data flow is applicable to the association of two or more components on a page. You can refine public data into global data for unified management, and then use a global data flow to associate two or more components.

Configuration

  1. Click the icon for configuring a global data flow in the upper-right corner.
  2. In the dialog box that appears, enter the variable name and value.
    • The variable value can be a number, character string, or JSON string.
    • The variable value is declared as an API address. Data obtained from the API is automatically used as the value of the variable name.

Usage

  • Obtain global data
    Use state.name in the component to obtain global data.
    <Input value={state.name} />
  • Modify global data
    Use the $setState() method in the component to modify global data.
    <Input onChange={value => $setState({ name: value })} />
    Note You must use the $setState() method to modify global data. If you use state.name = 'new value', re-rendering cannot be triggered.