Clay employs effector for state management. The decision aligns with the fact that the @lana-commerce/core library of Lana also provides several effector-based logic modules, many of which are utilized in Clay.

This page outlines the specifics of effector-based state management in Clay.

Global State

The global state is articulated in the src/state/state.ts file. This state contains elements that are accessible to all code at all times. However, it doesn't guarantee that these elements hold meaningful values during the initial page render. These elements include:

• Currency - Contrary to languages, the currently selected currency is not part of the page path.
• JWT - Customer authorization state.
• Recently Visited Products.
• Customer Info - Consists of a list of favorite items and customer name/email.
• Cart Items Count.

These elements will be appropriately populated with data once the "core" module is loaded.

The easy availability of these elements facilitates making UI decisions in various contexts. For instance, having customer info enables the decision-making process regarding whether a product is "liked" or not, regardless of where it's rendered.

Core

The Core module integrates several effector logic modules from the @lana-commerce/core library. These modules encompass:

• Customer module - Offers sign-in/sign-up capabilities, a fully-featured profile menu with favorite items, saved cards, saved addresses, a list of orders, returns, customer details, password reset, and so on.
• Cart module - A shopping cart.
• Image dialog module - A fullscreen image dialog for viewing product images and customer review images.
• Recently visited products module - A simple list of recently visited products (stored on the client-side).
• Search module - Provides basic "query"-based product search.
• Cookie consent popup dialog.

The corresponding code is located at src/state/async/core_impl.tsx.

Advanced Search

The Advanced Search function leverages the advanced search module from the @lana-commerce/core library. This module is employed to implement the dynamic category page. All the data for category filtering, aggregation UI, and the list of products as a result of the dynamic search query are provided by this module.

The corresponding code is located at src/state/async/advancedSearch_impl.tsx.

Product

The Product function utilizes the product module from the @lana-commerce/core library. While the product page is rendered statically, the page is updated with dynamic, up-to-date info when a customer visits it. This update is carried out using the product module, which, in addition to supplying product data, provides data for product reviews and questions.

The corresponding code is located at src/state/async/product_impl.tsx.