Data Flow

How to work with data flow

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?

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.

  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)