Consumer

To consue state coming from the store in your UI, you can use Consumer or MultiConsumer widgets. They are widgets that helps to use the state coming from the store in your UI avoiding boilerplates.

The difference between Consumer and MultiConsumer is that Consumer is used to consume a single state and MultiConsumer is used to consume multiple states.

Consumer

The Consumer widget is used to consume a single state. It takes a builder function that receives the context and the state, and returns a widget.

It takes a ref as argument to knwo which store it must consume. The ref is the one you passed to fluxer.addStore or Provider widget. It depends if it is a global store or a local store.

Consumer<MyStore, MyState>(
  ref: ref,
  builder: (context, state) {
    return Text(state.counter.toString());
  },
)

Conditional build

You can decide to rebuild the widget only when a condition is met. To do so, you can pass the buildWhen function to the Consumer widget. It takes the previous state and the current state as arguments and returns a boolean. If the condition returns true, the widget will be rebuilt.

Consumer<MyStore, MyState>(
  ref: ref,
  builder: (context, state) {
    return Text(state.counter.toString());
  },
  buildWhen: (previousState, currentState) {
    return previousState.counter != currentState.counter;
  },
)

MultiConsumer

The MultiConsumer widget is used to consume multiple stores.

It takes a builder function that receives the build context, and returns a widget. To access the state of the stores you must use the fluxer.stateOf method.

To know which stores you want to consume, you must pass a list of StoreConsumer to the storeConsumers argument. Each StoreConsumer takes a ref argument to know which store it must consume. The ref is the one you passed to fluxer.addStore or Provider widget. It depends if it is a global store or a local store. Optionally, you can pass a buildWhen function to the StoreConsumer to decide when the widget must be rebuilt.

MultiConsumer(
  storeConsumers: [
    StoreConsumer<CounterStore, CounterState>(
      ref: counterRef,
      // This will be rebuild when the counter decrement
      buildWhen: (prevState, state) => prevState.counter >= state.counter ,
    ),
    StoreConsumer<AuthStore, AuthState>(
      ref: authRef,
    ),
  ],
  // The build function will be called when one of the stores listed above is updated
  // and when the buildWhen function returns true if it is provided.
  build: (context) {
    // Retrieve the state of the stores
    var counterState = fluxer.stateOf<CounterState>("counterRef");
    var authState = fluxer.stateOf<AuthState>(authRef);
 
    return Text("Counter is ${counterState.counter} and user is ${authState.isLogged ? "logged" : "not logged"}");
  },
)

Store Provider