Frontend Development 9 min read

Fish-Redux 2.0: Enhancing Dynamic Page Composition and State Management

Fish‑Redux 2.0 introduces the unified FlowAdapter, which combines static and dynamic adapters into a callback‑driven architecture that enables runtime component re‑ordering, server‑controlled A/B testing, and modular data handling, dramatically improving page flexibility, reducing code redundancy, and accelerating complex Xianyu business scenarios.

Xianyu Technology
Xianyu Technology
Xianyu Technology
Fish-Redux 2.0: Enhancing Dynamic Page Composition and State Management

Current Status of Fish-Redux in Xianyu

Since its open‑source release, Fish‑Redux has been extensively validated on the core Xianyu flow, starting from product detail pages to publishing pages. The framework dramatically improves development efficiency for complex pages through component reuse and state‑management capabilities, reducing code redundancy and simplifying page complexity.

Challenges Faced

Page layout rigidity

Dynamic A/B testing limitations

Insufficient flexibility for emerging business scenarios

To meet these demands, a new architectural evolution was undertaken, resulting in Fish‑Redux 2.0.

Existing Adapters

StaticFlowAdapter

StaticFlowAdapter({
    @required List
> slots,
    Reducer
reducer,
    Effect
effect,
    ReducerFilter
filter,
})

  (Dependent = connector + component)

StaticFlowAdapter determines page order solely from a fixed slots list, enabling clear data flow but lacking dynamic re‑ordering.

DynamicFlowAdapter

final Map
> pool;
final AbstractConnector
> connector;

DynamicFlowAdapter({
    @required this.pool,
    @required this.connector,
    ReducerFilter
filter,
    Reducer
reducer,
    Effect
effect,
    @deprecated Object Function(T) key,
})

DynamicFlowAdapter introduces a pool of components and a connector to drive UI from data sources, but centralises all component logic in a single connector, weakening the framework’s data‑segregation advantage.

Evolution to FlowAdapter

The new FlowAdapter merges the strengths of both adapters while adding true dynamic composition. It replaces the static List<Dependent> with a callback‑based FlowDependencies , allowing runtime re‑ordering, A/B logic, and modular data handling.

Key concepts:

Dependent = connector (data description) + component (UI configuration)

FlowDependencies supplies a dynamic list of Dependents, enabling per‑component data processing.

This design restores the “data‑segregation” benefit: each connector handles its own data, while the adapter merely orchestrates UI assembly.

Benefits and Implementation

Unified adapter API reduces learning cost and ensures consistent performance optimisations.

Built‑in templates (static, dynamic, list) accelerate urgent business needs.

Section concept extends ListAdapter to support heterogeneous data collections.

Static and dynamic behaviours are now encapsulated in the same FlowAdapter, simplifying maintenance and enabling server‑driven page ordering, component A/B testing, and dynamic templates without client‑side releases.

Effect Demonstration

After the upgrade, detail and publishing flows were refactored to use the new adapter. Server‑provided configuration now dictates component order, A/B variants, and dynamic template selection, allowing rapid online adjustments such as price‑module repositioning.

Outlook

The refined adapter architecture will be merged into the upcoming Fish‑Redux release. Future work includes extending FlowAdapter to support waterfall‑style layouts and integrating PowerScrollView adaptations, as well as packaging dynamic template and A/B capabilities into an extension library.

Front-endfish-reduxstate managementadapterDynamic Composition
Xianyu Technology
Written by

Xianyu Technology

Official account of the Xianyu technology team

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.