> For the complete documentation index, see [llms.txt](https://scandipwa.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://scandipwa.gitbook.io/docs/how-to-tutorials-introductory/data-flow.md). # 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 This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://scandipwa.gitbook.io/docs/how-to-tutorials-introductory/data-flow.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.