Effect

  • Effect is a function that handles all side effects. It receives the following parameters
    • Action action
    • Context context
      • BuildContext context
      • T state
      • dispatch
      • isDisposed
  • It mainly contains four aspects of information
    • Receive “intent” from the View, including the corresponding lifecycle callback, and then make specific execution.
    • Its processing may be an asynchronous function, the data may be changed in the process, so we should get the latest data through context.state.
    • If you want to modify the data, you should send an Action to the Reducer to handle. It is read-only for data and cannot be modified directly in a effect function.
    • If its return value is a non-null value, it will take precedence for itself and will not do the next step; otherwise it will broadcast to the Effect part of other components and sent the action to the Reducer.

Self-First-Broadcast。
image.png | left | 747x399

  • Sample Code
  1. /// one style of writing
  2. FutureOr<Object> sideEffect(Action action, Context<String> ctx) async {
  3.   if (action.type == Lifecycle.initState) {
  4.     //do something on initState
  5.     return true;
  6.   } else if (action.type == 'onShare') {
  7.     //do something on onShare
  8.     await Future<void>.delayed(Duration(milliseconds: 1000));
  9.     ctx.dispatch(const Action('shared'));
  10.     return true;
  11.   }
  12.   return null;
  13. }
  15. class MessageComponent extends Component<String> {
  16.     MessageComponent(): super(
  17.             view: buildMessageView,
  18.             effect: sideEffect,
  19.         );
  20. }
  1. /// another style of writing
  2. Effect<String> buildEffect() {
  3.   return combineEffects(<Object, Effect<String>>{
  4.     Lifecycle.initState: _initState,
  5.     'onShare': _onShare,
  6.   });
  7. }
  9. void _initState(Action action, Context<String> ctx) {
  10.   //do something on initState
  11. }
  13. void _onShare(Action action, Context<String> ctx) async {
  14.   //do something on onShare
  15.   await Future<void>.delayed(Duration(milliseconds: 1000));
  16.   ctx.dispatch(const Action('shared'));
  17. }
  19. class MessageComponent extends Component<String> {
  20.     MessageComponent(): super(
  21.             view: buildMessageView,
  22.             effect: buildEffect(),
  23.         );
  24. }