What is reactive programming ?

Overview

Reactive programming is a programming paradigm that focuses on data streams and the propagation of change. Instead of imperatively asking "what is the value?" you declare "when the value changes, do this."

Think of a spreadsheet — when you change cell A1, cell B1 that depends on A1 automatically updates. That's reactive.

Core Concepts

• Subscription | Connection between observer and observable | | Operator | Transform, filter, combine streams |

Reactive vs Imperative

dartCopy
// ─── Imperative approach ──────────────────────────────
int a = 5;
int b = 10;
int sum = a + b; // sum = 15

a = 20;
// sum is still 15 — must manually recalculate

// ─── Reactive approach ────────────────────────────────
final aStream = BehaviorSubject<int>.seeded(5);
final bStream = BehaviorSubject<int>.seeded(10);

final sumStream = Rx.combineLatest2(aStream, bStream, (a, b) => a + b);

sumStream.listen((sum) => print('Sum: $sum')); // Auto-updates!

aStream.add(20); // sum automatically becomes 30

Reactive Programming in Flutter

Flutter's entire UI model is reactive — widgets rebuild automatically when state changes.

1. Streams + StreamBuilder

dartCopy
class ReactiveCounter extends StatefulWidget {
  @override
  _ReactiveCounterState createState() => _ReactiveCounterState();
}

class _ReactiveCounterState extends State<ReactiveCounter> {
  final StreamController<int> _counter = StreamController<int>.broadcast();
  int _count = 0;

  void _increment() => _counter.sink.add(++_count);

  @override
  void dispose() {
    _counter.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        StreamBuilder<int>(
          stream: _counter.stream,
          initialData: 0,
          builder: (context, snapshot) => Text('Count: ${snapshot.data}'),
        ),
        ElevatedButton(onPressed: _increment, child: Text('Increment')),
      ],
    );
  }
}

2. ChangeNotifier (SimpleReactive)

dartCopy
class CounterModel extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // Notifies all listeners reactively
  }
}

// Widget auto-rebuilds when count changes
Consumer<CounterModel>(
  builder: (context, model, child) => Text('${model.count}'),
)

3. BLoC Pattern (Reactive Architecture)

dartCopy
class CounterBloc {
  final _countController = StreamController<int>();
  Stream<int> get countStream => _countController.stream;

  int _count = 0;

  void increment() => _countController.sink.add(++_count);
  void dispose() => _countController.close();
}

rxdart (Reactive Extensions for Dart)

dartCopy
import 'package:rxdart/rxdart.dart';

final subject = BehaviorSubject<String>();

// Reactive search with debounce + distinct
subject.stream
    .distinct()
    .debounceTime(Duration(milliseconds: 300))
    .switchMap((query) => searchApi(query))
    .listen((results) => print(results));

Key Reactive Operators

map

filter/where

debounceTime

distinct

switchMap

combineLatest

merge

Benefits of Reactive Programming

• ✅ Declarative — describe what to do, not how
• ✅ Automatic UI updates when state changes
• ✅ Easy to compose and transform data
• ✅ Handles async events naturally
• ✅ Decoupled components

Flutter Connection: Flutter itself is a reactive framework.

textCopy

setState

,

textCopy

ChangeNotifier

,

textCopy

BLoC

,

textCopy

Riverpod

— all follow reactive principles. The widget tree "reacts" to state changes automatically.