fluxivity 1.0.0 copy "fluxivity: ^1.0.0" to clipboard
fluxivity: ^1.0.0 copied to clipboard

Experiments in reactivity

Fluxivity #

Fluxivity is an experimental package to study the effect of building a reactive graph. The code in the library can be improved to be better at code.

** ⚠️ Its important to note that this package hasn't been tested as it was hacked together on a whim. This notice will be removed once this condition is false **

Basic functionality #

There are 2 core classes

  • Reactive
  • Computed

A reactive class creates a reactive property and keeps track of its state publishing updates as the value changes through a stream. The latest value is always available as a static value without the need to call await or listen. However there is a stream available that can be listened to in case you want to listen for updates. The reactive class also contains a addEffect method to handle side effects as part of the mutation of the value. For example, updating data in a offline store, or syncing data to the backend.

There is an associated computed class that functions similar to a reactive class, however its value is always dependent on the classes it depends on for its value. The value of a computed class gets updated everytime the value of the dependent classes change. This can be used where derived values are necessary.

Why this package #

As state management solutions have exploded, I often find myself looking for simpler solutions that help with the following principles

  • App state should be global
  • View Models should only contain value/data accessors and not the data themselves
  • It should be possible to construct a graph like structure of App state.
  • It should be possible to access latest data without waiting on a value
  • It should be possible to track changes to data if required
  • Have a functional approach to dealing with changes

While people might disagree with the above principles, I believe there is a niche for them in the ecosystem where it adds value,

Example Usage #

CurrentPage page = CurrentPage({location: 'test'});

Reactive<String> appId = Reactve('app_123456789');
Reactive<CurrentPage> currentPage = Reactive(page);
Computed<String> location = Computed([currentPage], (List<Reactive<CurrentPage>> cpl ) {
    Reactive<CurrentPage> page = cpl.first();
    return page.location
})

currentPage.value.location;
// test
location.value
// test

page = CurrentPage({location: 'newLocation'});
currentPage.value = page;

currentPage.stream.listen((Snapshot<CurrentPage> snapshot) {
    snapshot.oldValue.location;
    //  test
    snapshot.newValue.location;
    // newLocation
})


currentPage.value.location;
// newLocation
location.value
// newLocation