Data Flow
Last updated
Last updated
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
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)