Fish Redux系列学习之认识effect、reducer

待我称王封你为后i 2021-08-24 23:46 409阅读 0赞

继续前面两篇文章：

[Fish Redux系列学习之初探][Fish Redux]

[Fish Redux系列学习之新建page以及认识state][Fish Redux_page_state]

[Fish Redux系列学习之认识view、action][Fish Redux_view_action]

这次我们学习剩下的两个`effect、reducer`。

先上一下`page`中的截图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]

## effect： ##

在`SplashPage`中`effect`里的方法内容用的并不多，先贴个代码上来

import 'package:fish_redux/fish_redux.dart';
    import 'package:flutter/material.dart' hide Action;
    import 'action.dart';
    import 'state.dart';
    
    Effect<SplashState> buildEffect() { 
      return combineEffects(<Object, Effect<SplashState>>{ 
        SplashAction.action: _onAction,
        Lifecycle.build: _onInitState,
      });
    }
    
    void _onAction(Action action, Context<SplashState> ctx) { 
    }
    
    void _onInitState(Action action, Context<SplashState> ctx) { 
    // Navigator.pushNamedAndRemoveUntil(
    // ctx.context, RoutesConstant.MAIN_PAGE, (router) => router == null);
    
      Future.delayed(Duration(milliseconds: 1), () { 
        Navigator.pushNamedAndRemoveUntil(
            ctx.context, RoutesConstant.MAIN_PAGE, (router) => router == null);
      });
    }

在`effect`中可以进行相应的数据初始化，以及在page生命周期中进行相对应的数据操作。

如下图，见名知意

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 1]  
上面说的内容有些少，我再从其他`page`中的`effect`里再截一个多一些的图，如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 2]  
从这里我们可以看到一些页面跳转的具体实现逻辑就是在这个部分进行的，当然，你也可以在这个页面进行一些**网络请求、读取数据库**等操作。

## reducer： ##

先上代码：

import 'package:fish_redux/fish_redux.dart';
    
    import 'action.dart';
    import 'state.dart';
    
    Reducer<SplashState> buildReducer() { 
      return asReducer(
        <Object, Reducer<SplashState>>{ 
          SplashAction.action: _onAction,
        },
      );
    }
    
    SplashState _onAction(SplashState state, Action action) { 
      final SplashState newState = state.clone();
      return newState;
    }

说实在的`reducer`这个玩意我也不是很太懂，用得也不是很多，这些都是自动生成的。

> reducer的作用是接收某个意图（action），然后对数据做出修改，即更新状态（state）。

> effect的用法跟 reducer 类似，但是责任不同。他负责处理“副作用”，这是函数式编程的概念。在这里简单地理解为，reducer是负责（state）的更新，effect 负责 state 更新之外的事情。  
> ![闲鱼官方描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 3]  
> 大概是这样，建议去深度redux。

我前前后后找了一遍`reducer`的文件，目前一个也还没有在此基础上进行操作。

## 总结： ##

对于`fishredux`的使用步骤：

1.  使用模版`FishReduxTemplate`生成你所需要的文件，如：`state.dart、view.dart、page.dart 、action.dart 、 effect.dart、`然后接下来你需要记住的是：
2.  `state.dart`是进行状态操作的，是数据源，你所定义的`page`里面的字段都需要写在这。
3.  `view.dart`是直接写`view`的地方，就是你写的界面内容都在这里面进行。
4.  `action.dart`是定义事件的，比如页面跳转，刷新数据，所定义的`action`都在这。
5.  `effect.dart`是具体的事件实现，类似`Java`中的`impl`即具体实现类。
6.  `page.dart`是组装以上4个的，当然也包括未提及的`adapter、reducer`。基本上`page.dart`中的文件不用动。

以上就是对`FishRedux`的学习使用总结。

[Fish Redux]: https://blog.csdn.net/xudailong_blog/article/details/104126455
[Fish Redux_page_state]: https://blog.csdn.net/xudailong_blog/article/details/104128560
[Fish Redux_view_action]: https://blog.csdn.net/xudailong_blog/article/details/104137821
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]: /images/20210529/3dd3786a86d24c88ac4a0fa3ce266820.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 1]: /images/20210529/86db777a2d664e46902c5d2f123d10ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 2]: /images/20210529/a32449bd1b134774bcbffe33c5102bfe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 3]: /images/20210529/eae87bdcf76f40ba9075525e065dd62f.png