Flutter fish-redux

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

image
20210630174342971.png

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

工程文件说明

  • page :创建页面的时候,所有页面的入口都在page
  • action:action 类似Android声明的接口内部方法,并不会实现具体业务,需要跟Effect、reducer结合使用
  • effect: 实现所有具体声明的方法,类似Android声明接口后,需要实现当前接口
  • reducer:个人Effect主要用来触发action传递过来的事件,执行类似网络请求等业务,而reducer更偏向是执行了业务之后,需要更新State属性,进而刷新UI使用的
  • view 比较简单,就是写UI的地方,如果在页面有操作,需要dispatch一个已经定义过都action
  • state:定义我们在页面展示的一些变量

计数器demo

具体的demo可以展示:

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

这个例子演示,view中点击此操作,然后更新页面数据。下述的流程,在effect中把数据处理好,通过action中转传递给reducer更新数据
view —> action —> effect —> reducer(更新数据)
注意:该流程将展示,怎么将数据在各流程中互相传递

page

import 'package:fish_redux/fish_redux.dart';

import 'effect.dart';
import 'reducer.dart';
import 'state.dart';
import 'view.dart';

class OaBaseInfoPage extends Page<OaBaseInfoState, Map<String, dynamic>> {
  OaBaseInfoPage()
      : super(
            initState: initBaseInfoState,
            effect: buildEffect(),
            reducer: buildReducer(),
            view: buildView,
            dependencies: Dependencies<OaBaseInfoState>(
                adapter: null,
                slots: <String, Dependent<OaBaseInfoState>>{
                }),
            middleware: <Middleware<OaBaseInfoState>>[
            ],);

state

  • 定义我们在页面展示的一些变量,initState中可以初始化变量;clone方法的赋值写法是必须的
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(“组件名”),调用我们封装的相关组件
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修饰关键字
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层中更新数据
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
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;
}

参考:
Flutter fish-redux 简单使用
手把手入门Fish-Redux开发flutter
Flutter FishRedux使用步骤

推荐阅读更多精彩内容