[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() ，点击增加的方法。

小剧场：

view： action！你赶紧给我建个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方法通知effect。action中还有另一个方法，肯定是还有一个人让他建的，我们等下再说。

小剧场：

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帮他建个带参数的方法的意图，他要更新数据。

小剧场：

effect： action我帮你加了加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方法，马上新建了一个新的state叫newState，

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

小剧场：

reducer： action你的请求我知道了，我先找state去clone一份state，再把传过来的值赋值到我的新state的count里面，这样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