> For the complete documentation index, see [llms.txt](https://scandipwa.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://scandipwa.gitbook.io/docs/how-to-tutorials-introductory/data-flow.md).

# Data Flow

{% embed url="<https://youtu.be/3T3OeCaSWLA>" %}
How to work with data flow
{% endembed %}

## The data-flow diagram

```
                 +-------------+
   1 user input  |             |
+----------------> A Component |
                 |             |
                 +-----------^-+                          +------------------------------+
                   |         |                            |                              |
  2 State changing |         | 8 Container updates        |   Magento (GraphQL server)   <---+
  user interaction |         | props of child component   |                              |   |
                   |         |                            +------------------------^-----+   |
             +------------------------+                                            |         |
             |                        |                                            |         |
             |     B Container        |                                            |         |
             |                        | NO      The data is requested from server  |         |
             |  Does it affect global +--------------------------------------------+         |
             |  state?                |                                                      |
             |                        |                                                      |
             +------------------------+                                                      |
               Y|     |                  Helpers are invoked                                 |
   * NOTE #1   E|     +--------------------------------------+                               |
               S|                                            |                               |
             +--v---------------------+                      |                               |
             |                        |                  +---v---------------------------+   |
             |    Is action result    |                  |                               |   |
        +---->      synchronous?      |                  |  E Utility / Helper function  |   |
        |    |                        |                  |                               |   |
        |    +------------------------+                  +------------------^------------+   |
        |       |                  |                                        |          |     |
        |     Y |                N | 3 Payload is passed to                 |          |     |
        |     E |                O | asynchronous action dispatcher         |          |     |
        |     S |                  |                                        |          |     |
        |       |     +------------v----------+    4 Helpers are invoked    |          |     |
        |       |     |                       +-----------------------------+          |     |
        |       |     |  C Action Dispatcher  |                                        |     |
        |       |     |                       <----------------------------------------+     |
        |       |     +-----------------------+   5 Asynchronous response is returned        |
        |       |        |             |                                                     |
        |       |        |             |             The data is requested from server       |
        |       |        |             +-----------------------------------------------------+
        |       |        |
        |       |        |
        |       |        |                   +--------------------+
        |       |        |                   |                    |
        |       +--------v------------------->  D Action Reducer  +----+
        |           6 Action is dispatched   |                    |    |
        |                                    +--------------------+    |
        |                                                              |
        +--------------------------------------------------------------+
                    7 Action result updates the state
```

## Who are the main actors?

* **A** – Component
  * Naming convention: `Feature.component.js`
  * Implements the data display functional
* **B** – Container
  * Naming convention: `Feature.container.js`
  * Relates the component with Redux global state
* **E** – Utility / Helper function
  * Naming convention: `Helper.js`
  * Utility functional which implements the common logic
* **GraphQL server**
  * The Magento 2, working via the GraphQL API

Following parts (after the **NOTE #1**), are only involved if the global state update is required:

* **unmentioned** – Action Declaration
  * Naming convention: `Feature.action.js`
  * Declare action interface (arguments and returned values)
* **C** – Action Dispatcher
  * Naming convention: `Feature.dispatcher.js`
  * Dispatches the Redux global state actions
* **D** – Action Reducer
  * Naming convention: `Feature.reducer.js`
  * Handles the state update, applies Redux action results to global state

## What is going on?

{% hint style="warning" %}
**Note:**

the passthrough to the Redux is not obligatory, I would say it is an anti-pattern. You must only involve the Redux (global state), if more than one or two components in completely different places of application must know about that. The best examples are: `cart`, `account`. ScandiPWA has some redundant states in it. Their amount will be reduced in the future.
{% endhint %}

1. User input (`User -> A`)
2. Global state changing user interaction (`A -> B`)
3. Event payload is passed to asynchronous action dispatcher (`B -> C`)
4. Helpers are invoked (`C -> E`)
5. Asynchronous response is returned from helper (`E -> C`)
6. Action is dispatched (`C -> D`, `B -> D`)
7. Action result updates the state (`D -> B`)
8. Container updates props of child component (`B -> A`)