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.
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.
Xianyu Technology
Official account of the Xianyu technology team
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.