Flutter fish-redux 简单使用

引入fish_redux插件，想用最新版插件，可进入pub地址里面查看

代码语言：javascript复制

dependencies:
  fish_redux: ^0.3.4

开发插件

此处我们需要安装代码生成插件，可以帮我们生成大量文件和模板代码

在Android Studio里面搜索”fish“就能搜出插件了，插件名叫：FishReduxTemplate

创建

这里我在新建的count文件夹上，选择新建文件，选择：New —> FishReduxTemplate

此处选择：Page，底下的“Select Fils”全部选择，这是标准的redux文件结构

创建好后文件结构

至此准备工作已做完

fish_redux流程

在写代码前，先看写下流程图

可以发现，事件的传递，都是通过dispatch这个方法，而且action这层很明显是非常关键的一层，事件的传递，都是在该层定义和中转的

写一个计数器demo

fish_redux正常情况下的流转过程 fish_redux各模块怎么传递数据

这个例子演示，view中点击此操作，然后更新页面数据。下述的流程，在effect中把数据处理好，通过action中转传递给reducer更新数据

view —> action —> effect —> reducer（更新数据）

注意：该流程将展示，怎么将数据在各流程中互相传递

main

这地方需要注意material这类系统包和fish_redux里包含的“Page”类名重复了，需要在这类系统包上使用hide，隐藏系统包里的Page类

代码语言：javascript复制

import 'package:fish_redux/fish_redux.dart';
import 'package:fishredux/count/page.dart';
import 'package:flutter/material.dart' hide Page;

Widget createApp() {
  final AbstractRoutes routes = PageRoutes(
    pages: <String, Page<Object, dynamic>>{
      'count_page': CountPage(),  //在这里添加页面
    },
  );

  return MaterialApp(
    title: 'FishDemo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: routes.buildPage('count_page', null),  //把他作为默认页面
    onGenerateRoute: (RouteSettings settings) {
      return MaterialPageRoute<Object>(builder: (BuildContext context) {
        return routes.buildPage(settings.name, settings.arguments);
      });
    },
  );
}

state

定义我们在页面展示的一些变量，initState中可以初始化变量；clone方法的赋值写法是必须的

代码语言：javascript复制

import 'package:fish_redux/fish_redux.dart';

class CountState implements Cloneable<CountState> {
  int count;

  @override
  CountState clone() {
    return CountState()..count = count;
  }
}

CountState initState(Map<String, dynamic> args) {
  return CountState()..count = 0;
}

view

view：这里面就是写界面的模块，buildView里面有三个参数

state：这个就是我们的数据层，页面需要的变量都写在state层
dispatch：类似调度器，调用action层中的方法，从而去回调effect，reducer层的方法
viewService：这个参数，我们可以使用其中的方法：buildComponent(“组件名”)，调用我们封装的相关组件

代码语言：javascript复制

import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';

import 'action.dart';
import 'state.dart';

Widget buildView(CountState state, Dispatch dispatch, ViewService viewService) {
  return _bodyWidget(state,dispatch);
}

Widget _bodyWidget(CountState state, Dispatch dispatch) {
  return Scaffold(
    appBar: AppBar(
      title: Text("FishRedux"),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('You have pushed the button this many times:'),
          Text(state.count.toString()),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        ///点击事件，调用action 计数自增方法
        dispatch(CountActionCreator.countIncrease());
      },
      child: Icon(Icons.add),
    ),
  );
}

action

该层是非常重要的模块，页面所有的行为都可以在本层直观的看到

XxxxAction中的枚举字段是必须的，一个事件对应有一个枚举字段，枚举字段是：effect，reducer层标识的入口
XxxxActionCreator类中的方法是中转方法，方法中可以传参数，参数类型可任意；方法中的参数放在Action类中的payload字段中，然后在effect，reducer中的action参数中拿到payload值去处理就行了
这地方需要注意下，默认生成的模板代码，return的Action类加了const修饰，如果使用Action的payload字段赋值并携带数据，是会报错的；所以这里如果需要携带参数，请去掉const修饰关键字

代码语言：javascript复制

import 'package:fish_redux/fish_redux.dart';

//TODO replace with your own action
enum CountAction { increase,updateCount }

class CountActionCreator {

  ///去effect层去处理自增数据
  static Action countIncrease() {
    return Action(CountAction.increase);
  }
  ///去reducer层更新数据，传参可以放在Action类中的payload字段中，payload是dynamic类型，可传任何类型
  static Action updateCount(int count) {
    return Action(CountAction.updateCount, payload: count);
  }
}

effect

如果在调用action里面的XxxxActionCreator类中的方法，相应的枚举字段，会在combineEffects中被调用，在这里，我们就能写相应的方法处理逻辑，方法中带俩个参数：action，ctx
action：该对象中，我们可以拿到payload字段里面，在action里面保存的值
ctx：该对象中，可以拿到state的参数，还可以通过ctx调用dispatch方法，调用action中的方法，在这里调用dispatch方法，一般是把处理好的数据，通过action中转到reducer层中更新数据

代码语言：javascript复制

import 'package:fish_redux/fish_redux.dart';
import 'action.dart';
import 'state.dart';

Effect<CountState> buildEffect() {
  return combineEffects(<Object, Effect<CountState>>{
    CountAction.increase: _onIncrease,
  });
}

///自增数
void _onIncrease(Action action, Context<CountState> ctx) {
  ///处理自增数逻辑
  int count = ctx.state.count   1;
  ctx.dispatch(CountActionCreator.updateCount(count));
}

reducer

该层是更新数据的，action中调用的XxxxActionCreator类中的方法，相应的枚举字段，会在asReducer方法中回调，这里就可以写个方法，克隆state数据进行一些处理，这里面有俩个参数：state，action
state参数经常使用的是clone方法，clone一个新的state对象；action参数基本就是拿到其中的payload字段，将其中的值，赋值给state

代码语言：javascript复制

import 'package:fish_redux/fish_redux.dart';

import 'action.dart';
import 'state.dart';

Reducer<CountState> buildReducer() {
  return asReducer(
    <Object, Reducer<CountState>>{
      CountAction.updateCount: _updateCount,
    },
  );
}

CountState _updateCount(CountState state, Action action) {
  final CountState newState = state.clone();
  newState.count = action.payload;
  return newState;
}

效果

点击按钮 1

Demo下载

redux action clone state view

0 人点赞