Fish Redux: A Modular Flutter Application Framework for Large‑Scale Projects

Background: In deep Flutter development at Xianyu, code coupling and poor maintainability were severe. A unified application framework was needed.

Fish Redux is an upper‑layer framework based on Redux data management, designed for medium to large complex Flutter apps. Its main features are configuration‑driven assembly, clean code, easy writing, maintenance, and collaboration.

Inspired by Redux, React, Elm, Dva, Fish Redux extends concepts of concentration, decomposition, reuse, and isolation.

Architecture: The framework separates concerns into three layers – View, Effect, Reducer – plus optional Dependencies. This solves contradictions between centralized data management and component decomposition.

Redux basics: Redux provides predictable, centralized, debuggable, flexible data management. In Fish Redux, State, Action, Reducer, Store, Middleware follow the same definitions as ReduxJS.

Improvements in Fish Redux:

Automatic composition of Reducers, eliminating manual layer‑by‑layer assembly.

Component model where each component defines a data struct and a Reducer, establishing parent‑child dependencies that resolve the tension between centralization and decomposition.

Adapter abstraction for high‑performance ListView scenarios, addressing issues such as “Big‑Cell” performance, lifecycle separation, and effect‑view coupling.

Component definition:

View : a pure function (T, Dispatch, ViewService) => Widget that is fully data‑driven.

Effect : handles side‑effects with signature (Context, Action) => Object , may be async, returns bool or Future.

Reducer : pure function (T, Action) => T following Redux conventions.

Dependencies : explicit registration of sub‑components, adapters, etc.

Directory layout example (simplified):

sample_page/
  ├─ action.dart
  ├─ page.dart
  ├─ view.dart
  ├─ effect.dart
  ├─ reducer.dart
  ├─ state.dart
  └─ components/
      ├─ sample_component/
          ├─ action.dart
          ├─ component.dart
          ├─ view.dart
          ├─ effect.dart
          └─ reducer.dart

Communication uses a self‑first broadcast mechanism: an Action is first handled by the originating component; if not processed, it is broadcast to other components and the Redux store.

Refresh mechanism propagates data changes upward, automatically shallow‑copying parent data, and triggers view updates via shouldUpdate .

Advantages:

Centralized, observable data management with full Redux benefits.

Component‑level decomposition of both UI and state, enhancing team collaboration.

Clear separation of View, Effect, and Reducer, enabling stateless, testable functions.

Declarative configuration for assembling components, adapters, and dependencies.

Small footprint (≈1000 lines of code) while being simple, complete, and extensible.

Fish Redux is already used in multiple scenarios within Alibaba’s Xianyu team and will be open‑sourced soon.