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

约定不等于承诺〃 2021-06-10 20:37 278阅读 0赞

继续上一篇的学习，现在我们将fishredux导包。

## pubspec.yaml文件： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]  
按照图中圈出来的，进行依赖。Android studio 有一个快速生成fisuredux模版插件，不过可能不怎么好用，在这里还是稍微提一下。**FishReduxTemplate**

fishredux有page、component和adapter三类，其中page是继承自component的，adapter是fishredux专门做出来的列表类组件。接下来我们用第一种page页面，这也是我们常用的页面。

## 新建page页面 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 1]  
如上：splash（闪屏，第一页），新建的**page**页面有`action、effect、page、reducer、state、view`这6个组件，不过`page`更类似一个组装器，没有变动，接下来我们看看**page**里面的内容。

## page里的内容 ##

import 'package:fish_redux/fish_redux.dart';
    
    import 'effect.dart';
    import 'reducer.dart';
    import 'state.dart';
    import 'view.dart';
    
    class SplashPage extends Page<SplashState, Map<String, dynamic>> { 
      SplashPage()
          : super(
                initState: initState,
                effect: buildEffect(),
                reducer: buildReducer(),
                view: buildView,
                dependencies: Dependencies<SplashState>(
                    adapter: null,
                    slots: <String, Dependent<SplashState>>{ 
                    }),
                middleware: <Middleware<SplashState>>[
                ],);
    
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 2]  
基本上就是不动，以后如果要用到adapter需要在**null**那里进行组装，还有一些中间件需要在middleware中进行配置。

上面就是page里的内容，记住，这个类基本上生成了也就这样子了。

## state页面 ##

这里的state页面就是点page里中的`initState`中进来的，当然数据源就是从这里过来的，可以初始化数据，及其他的类似刷新类的contronler等等。

import 'package:fish_redux/fish_redux.dart';
    
    class SplashState implements Cloneable<SplashState> { 
    
      @override
      SplashState clone() { 
        return SplashState();
      }
    }
    
    SplashState initState(Map<String, dynamic> args) { 
      return SplashState();
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 3]  
如下图，这里我给看一个有填写内容的**state**文件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 4]  
这里暂时就是这样用。上面说的`page`可以不用怎么记，`state`还是要记住的，因为这个我们是经常用，而且用的也很多，你只要记住`state`是状态，数据的意思就行了，数据的初始化，controler什么的都是在这里进行操作的。

接下来我们将讲解`page`中的剩下四个组件。Fish Redux系列学习之初探

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]: /images/20210529/45e7084532d0422a9faa288dafe4968d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 1]: /images/20210529/9acd027a6bd0464aaf6687ed36e35da2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 2]: /images/20210529/850bfdd5bbad40b18021a075c4d369df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 3]: /images/20210529/c48d111422594ca69ffd168b06871c54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 4]: /images/20210529/906efc7f67ce4a23bdf473430e54d130.png