# Data Flow {% embed url="" %} 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`) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://scandipwa.gitbook.io/docs/how-to-tutorials-introductory/data-flow.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.