Have you already heard about reactive programming? RxDart is a reactive functional programming library for Dart language, based on ReactiveX. Dart already has a decent package to work with Streams, but RxDart comes to adds functionality on top of it. But now you might be asking, what’s Stream?
Streams and Sinks
Streams represent flux of data and events, and what it’s important for? With Streams, you can listen to data and event changes, and just as well, deal with what’s coming from the Stream with listeners. How it can be applied to Flutter? For example, we have a Widget in Flutter called StreamBuilder that builds itself based on the latest snapshot of interaction with a Stream, and when there’s a new flux of data the Widget reload to deal with the new data. Widget Weekly of Flutter Dev Channel offers great content about how the StreamBuilder works. And about Sinks? If we have an output of a data flux, we also need an input, that’s what Sinks is used for, seems simple right? Now let’s see about the BLoC pattern and how can we combine both concepts into a great Flutter app.
BLoC Pattern
The BLoC(Bussiness Logic Component) Pattern was announced officially by Paolo Soares in the Dart Conference 2018. If you saw the announcement video, probably you realized that the initial proposal was to reuse the code related to the business logic in other platforms, in this case, Angular Dart. Shortly what the pattern seeks for, is take all business logic code off the UI, and using it only in the BLoC classes. It brings to the project and code, independence of environment and platform, besides put the responsibilities in the correct component. And now our talk will make much more sense, because BLoC Pattern only relies on the use of Streams. For more deatail check my article BLoC- Flutter State Management Technique
A look at RxDart
RxDart is now (at the moment of this post) in the version 0.21.0. And here I’m going to talk about some objects that the library brings to us.
Observable<T> class
Observable allow us to send a notification to Widgets which is observing it and then deal with the flux of data. Observable class in RxDart extends from Stream, which implies in some great things:
- All methods defined on the Stream class exist on Observable as well.
- All Observable can be passed to any API that expects a Dart Stream as an input (including for example StreamBuilder Widget).
PublishSubject<T> class
This one is pretty simple. This Subject allows sending data, error and done events to the listener. Here it will work with Sinks, which we were talking about before. See the example above:
PublishSubject<int> subject = new PublishSubject<int>();
/*this listener below will print every integer added to the subject: 1, 2, 3, ...*/subject.stream.listen(print);
subject.add(1);
subject.add(2);
/*but this listener below will print only the integer added after his initialization: 3, .../*subject.stream.listen(print);
subject.add(3);
BehaviorSubject<T> class
This one is similar to the PublishSubject. It also allows sending data, error and done events to the listener, but the latest item that has been added to the subject will be sent to any new listeners of the subject. But don’t you worry, after that, any new events will be appropriately sent to the listeners. See the example above:
BehaviorSubject<int> subject = new BehaviorSubject<int>();subject.stream.listen(print); // prints 1,2,3 subject.add(1);
subject.add(2);
subject.add(3);
subject.stream.listen(print); // prints 3
ReplaySubject<T> class
The ReplaySubject allow us the same: sending data, error and done events to the listener. But with a crucial difference here. As items are added to the subject, the ReplaySubject will store them and when the stream is listened to, those recorded items will be emitted to the listener. See the example above:
ReplaySubject<int> subject = new ReplaySubject<int>();
subject.add(1);
subject.add(2);
subject.add(3);
subject.stream.listen(print); // prints 1, 2, 3
Now let’s see it in practice
In this article I will show to you a simple example of using RxDart and principles of BLoC pattern. Let’s start it.