美文网首页
fish-redux(二):effect的使用

fish-redux(二):effect的使用

作者: 谢伟浩 | 来源:发表于2019-05-05 17:53 被阅读0次

    1. effect打印

    上面的实例中并没用到effect,现在在effect代码中添加:

    Effect<PageState> buildEffect() {
      return combineEffects(<Object, Effect<PageState>>{
        Lifecycle.initState: _init,
        PageAction.update: _onUpdate,
      });
    }
    
    void _init(Action action, Context<PageState> ctx) {
      println("Effect: _init");
    }
    
    void _onUpdate(Action action, Context<PageState> ctx) {
      println("Effect: _onUpdate");
    }
    

    在Page中添加effect:

    class MainPage extends Page<PageState, Map<String, dynamic>> {
    
      MainPage():super(
        reducer: buildReducer(),
        initState: initState,
        view: buildView,
        effect: buildEffect(),
      );
    
    }
    

    重启运行,打印如下:

    I/flutter (17799): main
    I/flutter (17799): Reducer:buildReducer
    I/flutter (17799): state:initState
    I/flutter (17799): Effect: _init
    I/flutter (17799): view:buildView
    

    点击按钮发现effect会响应,但reducer没有响应了,可见effect会比reducer优先收到action

    I/flutter (17799): action:update
    I/flutter (17799): Effect: _onUpdate
    

    2. effect使用

    下面修改fish-redux(一)中的代码,使用effect实现点击按钮弹出输入对话框来更新数据。

    在PageAction中添加onEdit,一般触发effect的Action以onXXXX命名:

    enum PageAction {onEdit, update}
    
    class PageActionCreator {
      static Action updateAction(String title, String content) {
        println('action:update');
        return Action(
          PageAction.update,
          payload: <String, String>{'title': title, 'content': content},
        );
      }
    
      static Action onEditAction() {
       return Action(PageAction.onEdit);
      }
    }
    

    view文件修改为点击按钮发送onEditAction。

    Widget buildView(PageState state, Dispatch dispatch, ViewService viewService) {
      println('view:buildView');
      return Scaffold(
        appBar: AppBar(title: Text(state.title)),
        body: Center(child: Text(state.content),),
        floatingActionButton: FloatingActionButton(
          onPressed: (){dispatch(PageActionCreator.onEditAction());},
          child: Icon(Icons.edit),
        ),
      );
    
    }
    

    添加Effect文件,这里Effect监听了Lifecycle.initState和 PageAction.onEdit两个Action,_init方法内可以进行数据初始化,比如读取数据库等等,_init方法会在initState方法后调用。在_onEdit方法内实现弹窗动作,在数据回传后发送updateAction来更新页面数据。

    Effect<PageState> buildEffect() {
      return combineEffects(<Object, Effect<PageState>>{
        Lifecycle.initState: _init,
        PageAction.onEdit: _onEdit,
      });
    }
    
    void _init(Action action, Context<PageState> ctx) {
      println("Effect: _init");
      ctx.dispatch(PageActionCreator.updateAction('title', 'init'));
    }
    
    String _input;
    
    
    void _onEdit(Action action, Context<PageState> ctx) {
      print('Effect _onEdit');
      showDialog(
          context: ctx.context,
          builder: (_) => new AlertDialog(
              title: Text("Modify content"),
              content: TextField(
                onChanged: (_){
                  _input = _;
                },
              ),
              actions:<Widget>[
                new FlatButton(child:new Text("CANCEL"), onPressed: (){
                  Navigator.of(ctx.context).pop();
                },),
                new FlatButton(child:new Text("OK"), onPressed: (){
                  Navigator.of(ctx.context).pop<String>(_input);  //确定按钮关闭对话框携带数据
                },)
              ]
          )
      ).then((_){  //数据回传后通过updateAction更新页面数据
        ctx.dispatch(PageActionCreator.updateAction('title', _));
      });
    }
    

    点击按钮后发送onEditAction来触发Effect来执行弹窗动作,数据回传后通过updateAction来触发reducer更新页面数据

    相关文章

      网友评论

          本文标题:fish-redux(二):effect的使用

          本文链接:https://www.haomeiwen.com/subject/wkjcwqtx.html