Skip to main content

Core

The ASP consists of three components: Atoms, Actions, and Selectors. In general, knowledge of these three is enough to master the pattern.

Atom

The smallest part of a state. It is responsible for propagating changes to Widgets or functions but does not have the ability to change its own state.

final productsState = atom<List<Product>>(
[]
key: 'productsState',
);

Action

Responsible for changing the state of an Atom. This component can be instantiated in four ways, each representing the number of arguments it can receive:

  • atomAction: Receives no arguments.
  • atomAction1: Receives 1 argument.
  • atomAction2: Receives 2 arguments.
  • atomAction3: Receives 3 arguments.
final addProductAction = atomAction1<Product>(
key: 'addProductAction',
(set, newProduct) {
final products = productsState.state;
set(productsState, [...products, newProduct]);
}
);

// exec
addProductAction(Product(id: 1, name: 'Prod', price: 1));

Selector

Selectors are responsible for deriving states from one or more Atoms. Values assigned by the get property will compute a new state in the Selector when modified. Selector is also a type of Atom.

final totalPriceState = selector<String>(
key: 'totalPriceState',
(get) {
final products = get(productsState);
final value = products.fold(
0.0,
(value, product) => value + product.price,
);
return r'R$ ' + value.toStringAsFixed(2);
}
);

Rules

To effectively use this approach, consider these architectural limits:

  1. All states must be an Atom.
  2. An Atom can only be altered by an Action.
  3. Use atomSelector to combine multiple Atoms.
  4. Anything outside these rules is incorrect.