其他分享
首页 > 其他分享> > [Flutter] fish_redux是怎么分工合作的

[Flutter] fish_redux是怎么分工合作的

作者:互联网

fish_redux是怎么分工合作的

01: 声明

本文章只是本小白的拙见,fish_redux对我来说还是比较难的框架,学习了几天,很多东西仍然一知半解。所以自己写点浅薄的东西记录一下自己的理解,如果有幸被大佬看到,出错的地方请不吝赐教。

02: 流程图

放上小呆呆大佬画的流程图,基本结构就是这样的。总的来说,各模块分工合作,每个人负责不同的事情,通过action和dispatch来调度。

03:计数器demo讲解

结构图

STEP01 state定义变量

fish_redux的变量一般定义在state里,然后其他模块就可以通过【state.变量名】的方式来调用该变量。

demo里定义了一个count变量来存储计数,定义完clone方法里要clone一下(以供reducer调用,刷新值)。

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

STEP02 view显示count并调度

view里通过state.count来显示当前state里存的count。在点击事件里通过dispatch(action)向action发送意图,发送的意图是onIncrease() ,点击增加的方法。

小剧场:

viewaction!你赶紧给我建个onIncrease()方法,我急用!

///view
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 Scaffold(
    appBar: AppBar(title: Text('示例demo'),),
      ///显示count
    body:Center(child: Text('${state.count}')),
    floatingActionButton: FloatingActionButton(
      onPressed: (){
          ///发送意图
        dispatch(CountActionCreator.onIncrease());
      },
      tooltip: 'Increment',
      child: const Icon(Icons.add),
    ),
  );
}

STEP03 action建方法

action收到来自view的意图后,就不辞劳苦地为view建立起onIncrease的方法,并通过Action方法通知effectaction中还有另一个方法,肯定是还有一个人让他建的,我们等下再说。

小剧场:

action: 我建好了,effect你按照要求处理一下数据,view说点一下要加1,你帮忙搞一下把。

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

enum CountAction { onIncrease,updateCount }
///count加1方法
class CountActionCreator {
  static Action onIncrease() {
    return const Action(CountAction.onIncrease);
  }
///更新数据方法
  static Action updateCount(int count) {
    return  Action(CountAction.updateCount,payload: count);
  }
}

STEP04 effect初始化和处理数据

effect收到action的请求后,为方法增加了一个新变量count,新count等于老count加1。

处理完数据后,通过dispatch(action)通知action帮他建个带参数的方法的意图,他要更新数据。

小剧场:

effectaction我帮你加了加1的操作,并且存放在新的count里了,现在我要把新的count传给reducer让他更新,你帮我建个方法呗。

///effect
import 'package:fish_redux/fish_redux.dart';
import 'action.dart';
import 'state.dart';
Effect<CountState> buildEffect() {
  return combineEffects(<Object, Effect<CountState>>{
    CountAction.onIncrease: _onIncrease,
  });
}
void _onIncrease(Action action, Context<CountState> ctx) {
///加1操作
  int count=ctx.state.count+1;
///调度action建立更新数据的方法
  ctx.dispatch(CountActionCreator.updateCount(count));
}

STEP05 action又建方法传参

action接收到effect的意图后,帮effect建了个可以带参数的方法,并且通过Action通知了reducer,让它去把新传来的值更新一下。

小剧场:

action: effect我马上帮你建,建完我帮你通知一下reducer,让它去更新新传来的count

///action
///此处代码不重复贴了,包括在上面的action里面了,就是一个updateCount(count)方法

STEP06 reducer更新数据

reducer通过Action接收到action的通知后,调用了state里的clone方法,马上新建了一个新的statenewState

并且将action传过来的值(值就是action.payload)赋值给newStatecount变量,返回newState作为新的state,并且刷新页面(如果值改变的话。

小剧场:

reduceraction你的请求我知道了,我先找state去clone一份state,再把传过来的值赋值到我的新statecount里面,这样view拿到的state就是我的这个新state了,拿到的count也就是我这个新count了。

///reducer
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) {
///clone一个state赋值给newState
  final CountState newState = state.clone();
///将传过来的值action.payload赋值给newState的count变量
  newState..count=action.payload;
  return newState;
}

标签:count,fish,dart,state,action,redux,Flutter
来源: https://www.cnblogs.com/TobuTobu/p/15970215.html