Understanding the Connector in fish_redux: Architecture and Code Walkthrough

fish_redux is an open‑source Flutter application framework created by the Xianyu team to achieve high component cohesion and low coupling. It borrows the single‑direction data flow concept from Redux.

In React‑Redux, the connect function binds a component to the Redux store, allowing it to read state and dispatch actions. fish_redux introduces a similar but distinct concept called connector , which links a child Component to its parent component’s state in a strict tree structure.

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

A connector in fish_redux works by creating a Component tree. Each Component aggregates its own state and dispatch . The child component obtains a filtered slice of the parent’s state via the connector , forming a funnel‑like data pipeline.

Compared with React‑Redux, where the component hierarchy is parallel to the Redux store, fish_redux enforces a hierarchical relationship: the child’s state is derived from the parent component, not directly from the global store.

A Dependent equals connector + Component . It can be a Component (built by buildComponent ) or an Adapter (built by buildAdapter ), providing a unified API for view assembly.

The connector performs two main operations:

get : extracts a sub‑state ( P ) from the global state ( T ) using the provided getter.

set : merges the modified sub‑state back into the global state.

Implementation details are illustrated with the ReportConnector example. The class extends ConnOp<PageState, ReportState> and overrides get to compute total and done fields from the page’s to‑do list, while set is left empty because the report is read‑only.

class ReportConnector extends ConnOp
{
  @override
  ReportState get(PageState state) {
    final reportState = ReportState();
    reportState.total = state.toDos.length;
    reportState.done = state.toDos.where((tds) => tds.isDone).toList().length;
    return reportState;
  }

  @override
  void set(PageState state, ReportState subState) {}
}

During component building, the framework calls _Dependent.buildComponent , which uses the connector.get result as the component’s props, then runs the component’s reducer, and finally applies connector.set if the sub‑state changed. This avoids unnecessary copies of the whole state when only a small slice changes.

Overall, fish_redux’s connector provides a clear mechanism for data flow between parent and child components, enabling high reuse of UI modules and supporting multiple detail‑page types in the Xianyu client.