Exploring Reactive Programming in Flutter: Architecture and Implementation

Flutter widgets are inspired by React and form a native reactive UI framework. This article shares insights from Xianyu's engineering practice on applying the React programming paradigm in Flutter.

It traces the evolution of UI architectures—from early MVC, through MVP and MVVM, to functional reactive programming—highlighting the importance of clear model‑view boundaries and data‑driven UI updates.

Flutter’s reactive features include describing the UI with immutable widgets, using a widget tree, and rebuilding the UI when data changes. Widgets act as read‑only configurations; state changes trigger new widget instances.

Component communication relies on a common ancestor using InheritedWidget, which provides efficient lookup and dependency tracking for child widgets.

Functional data flow is realized via Dart’s Stream API and a Redux‑like store. Actions are dispatched, reducers (pure functions) compute new state, and Interrupters handle side effects such as network requests.

Key code snippets illustrate building a Store, registering reducers and interrupters, and dispatching actions:

Store<PublishState> buildPublishStore(String itemId) {
    PublishState initState = new PublishState();
    initState.itemId = itemId;
    initState.isLoading = true;
    var reducerBinder = ActionBinder<PublishState>.reducerBinder<PublishState>()
        .bind(PublishAction.DETAIL_LOAD_COMPLETED, _loadCompletedReducer)
        .bind(PublishAction.DELETE_IMAGE, _delImageReducer)
        .bind(PublishAction.ADD_IMAGE, _addImageReducer);
    var interrupterBinder = ActionBinder<PublishState>.interrupterBinder<PublishState>()
        .bind(PublishAction.LOAD_DETAIL, _loadDataInterrupter)
        .bind(PublishAction.ADD_IMAGE, UploadInterrupter.imageUploadInterrupter);
    return new CommonStore<PublishState>(name: 'Publish', initValue: initState, reducer: reducerBinder, interrupter: interrupterBinder);
}

bool _onMtopReq<S>(InterrupterContext<S> ctx, Action action) {
    NetService.requestLight(api: action.args.api, version: action.args.ver, params: action.args.params, success: (data) {
        ctx.store.dispatch(Action.obtain(Common.MTOP_RESPONSE).args({mtopResult: 'success', data: data}));
    }, failed: (code, msg) {
        ctx.store.dispatch(Action.obtain(Common.MTOP_RESPONSE).args({mtopResult: 'failed', code: code, msg: msg}));
    });
    return true;
}

The article also discusses componentization, allowing multiple stores for reusable widgets (e.g., video players) and the challenges of fine‑grained UI binding and complex state management.

Finally, the Xianyu tech team invites developers from various domains to join their effort.