在写代码前，先看写下流程图
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> {
OaBaseInfoPage()
: super(
initState: initBaseInfoState,
effect: buildEffect(),
reducer: buildReducer(),
view: buildView,
dependencies: Dependencies(
adapter: null,
slots: >{
}),
middleware: >[
],);
state
- 定义我们在页面展示的一些变量，initState中可以初始化变量；clone方法的赋值写法是必须的
import 'package:fish_redux/fish_redux.dart';
class CountState implements Cloneable {
int count;
@override
CountState clone() {
return CountState()..count = count;
}
}
CountState initState(Map 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: [
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 buildEffect() {
return combineEffects(>{
CountAction.increase: _onIncrease,
});
}
///自增数
void _onIncrease(Action action, Context 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 buildReducer() {
return asReducer(
>{
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使用步骤