Store

A store is where you want to store your data. You can (and certainly) should have multiple stores in your application. For example, you might have a store for users, a store for posts, a store for comments, etc. You can also have a store for a single entity, like a user. In this case, the store would be responsible for managing the state of a single user.

The store is also responsible to mutate your states. You define actions that describe how your state should change. The store then executes these actions, updates the state accordingly and notifies listeners that the state has changed.

Usage

Definition of a store

A store is a class that extends Store and specify State. The state is the data that you want to store in the store. The state is immutable, so you can't change it directly.

import 'package:fluxer/fluxer.dart';
 
// MyStore must extend Store<MyState>
class MyStore extends Store<MyState> {
  MyStore() : super(MyState(0));
}
 
// Class that deinfe the state of the store
class MyState {
  MyState(this.counter);
 
  final int counter;
}
 

Actions

Actions are the way to mutate your state. There are two ways to define actions:

• As a method of your store
• By calling myStore.addAction(<action callback>); anywhere your store is available.

As a method of your store

class MyStore extends Store<MyState> {
  MyStore() : super(MyState(0));
 
  // Function that increment a counter using action
  Future<void> increment() {
    addAction((emit) {
        emit(state: MyState(state.counter + 1));
    });
  }
}
 

The emit function is a callback that you must call to update the state of your store and/or dispatch the action.

Dispatching the action removes the action from the queue of actions and lets the next action in the queue (if there is one) to be executed. This way you have a control on when your actions are executed. If you don't dispatch explicitely in your action, the action will be dispatched automatically when the function is finished.

Emit function

The emit function takes up to two parameters:

• state: the new state of the store. If you don't specify a new state, the state of the store will not be updated.
• dispatch: a boolean that indicates if the action should be dispatched. If you don't specify a value, the action will be dispatched.

Listen to a store

You can listen to a store to be notified when the state of the store changes. You can listen to a store in two ways:

• by using consumer widgets
• by using the listen method of your store

Here we will focus on using the listen method. It is also the method used under the hood by the widgets.

The listen method takes a callback that will be called when the state of the store changes. The callback has the following signature:

Function(State? prevState, State state);

It receives the previous state and the new state as parameters. The previous state can be null if the store is initialized for the first time.

Example

  var myStore = MyStore();
 
  // Listen to the store
  var stopListening = myStore.listen((prevState, state) {
    print('Previous state: $prevState');
    print('New state: $state');
  });
 
  // Stop listening to the store
  stopListening();