Tutorial: Handling State in Flutter with ReduRx.

One the of the hardest things in development - IMHO - after naming, is handling State, at least handling it reactively without overs (over-building, over-rendering, over-painting and overhead!).

Let’s get started!

No secret:

flutter create geo_tag_diary

Open it in your favorite editor, I personally like VSCode, so code geo_tag_diary, then add flutter_redurx in your dependencies key at pubspec.yaml. Let you editor get the dependencies again or run in the project folder: flutter packages get.

dependencies:
  flutter_redurx:
  flutter:
    sdk: flutter

Now let’s create a very basic app just to see it working in the device/emulator/simulator (you name it).

Create a lib/app.dart file and add the contents:

And replace everything at lib/main.dart by:

Run the app, you should be seeing It works on the center of the screen. And you know what this means, it means our greenfield is working!

Adding Flutter-ReduRx

Let’s change it a little bit so we can see some Flutter-ReduRx magic happening.

First, we create the class that will represent our State, I’ll call it Diary and place it at lib/diary.dart:

Then we change lib/main.dart to create the initial State, give it to a Store and give the Store to a Provider:

Flutter-ReduRx is a companion between Flutter’s bindings (Provider & Connect) and ReduRx state management (thought Store & Action).

Let’s see what this Connect means in the newlib/app.dart. Please, read the comments on the code:

Right, but all of this could just be replaced by the new message on the greenfield version…

We are going to see the why now!

Mutating the State with Actions

Actions are the last concept here and will close de Flux model.

Let’s create an Action that mutates our previous initial State by a new message. At lib/actions.dart:

To dispatch this Actions we can call dispatch method on the Store. Pay attention to the comments again, please.

And note that we changed lib/app.dart to handle more components on a Column.

Pretty cool! But life isn’t made about hard-coded constants. We talk to databases, another applications and services in general…

Here comes AsyncActions

Just like Actions, but with the power of Dart’s Async constructs.

Let’s improve our Diary with cool random quotes to make your day greater. I’ll be using Tadas Talaikis API (no good reason, just Googled about “free quote api”) and HTTP abstraction from http package. The lib/actions.dart should look like:

We should update lib/app.dart to call our newly created AsyncAction. As always, please continue the read by taking a look at the comments on the code:

The result

https://github.com/leocavalcante/Flutter-ReduRx-GeoTagDiary/tree/part-1

Why this is called “GeoTagDiary” and there is a “part 1”? Because one single String is easy, there is more to come! Stay tuned!

Thanks!

The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.