Data Flow
The data-flow diagram
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