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.
User input (
User -> A
)Global state changing user interaction (
A -> B
)Event payload is passed to asynchronous action dispatcher (
B -> C
)Helpers are invoked (
C -> E
)Asynchronous response is returned from helper (
E -> C
)Action is dispatched (
C -> D
,B -> D
)Action result updates the state (
D -> B
)Container updates props of child component (
B -> A
)
Last updated