Flutter fish-redux 簡單使用

引入fish_redux插件默刚，想用最新版插件，可進(jìn)入pub地址里面查看

dependencies:
  fish_redux: ^0.3.4

開發(fā)插件

此處我們需要安裝代碼生成插件芭毙，可以幫我們生成大量文件和模板代碼

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

image.png

創(chuàng)建

這里我在新建的count文件夾上，選擇新建文件退敦，選擇：New —> FishReduxTemplate

image.png

此處選擇：Page粘咖，底下的“Select Fils”全部選擇，這是標(biāo)準(zhǔn)的redux文件結(jié)構(gòu)

image.png

創(chuàng)建好后文件結(jié)構(gòu)

image.png

至此準(zhǔn)備工作已做完

fish_redux流程

在寫代碼前侈百，先看寫下流程圖

截屏2020-08-27 09.55.40.png

可以發(fā)現(xiàn)瓮下，事件的傳遞翰铡，都是通過dispatch這個(gè)方法，而且action這層很明顯是非常關(guān)鍵的一層讽坏，事件的傳遞锭魔，都是在該層定義和中轉(zhuǎn)的

寫一個(gè)計(jì)數(shù)器demo

fish_redux正常情況下的流轉(zhuǎn)過程
fish_redux各模塊怎么傳遞數(shù)據(jù)

這個(gè)例子演示，view中點(diǎn)擊此操作路呜，然后更新頁面數(shù)據(jù)迷捧。下述的流程，在effect中把數(shù)據(jù)處理好胀葱，通過action中轉(zhuǎn)傳遞給reducer更新數(shù)據(jù)

view —> action —> effect —> reducer（更新數(shù)據(jù)）

注意：該流程將展示漠秋，怎么將數(shù)據(jù)在各流程中互相傳遞

main

這地方需要注意material這類系統(tǒng)包和fish_redux里包含的“Page”類名重復(fù)了，需要在這類系統(tǒng)包上使用hide抵屿，隱藏系統(tǒng)包里的Page類

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),  //把他作為默認(rèn)頁面
    onGenerateRoute: (RouteSettings settings) {
      return MaterialPageRoute<Object>(builder: (BuildContext context) {
        return routes.buildPage(settings.name, settings.arguments);
      });
    },
  );
}

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里面有三個(gè)參數(shù)

state：這個(gè)就是我們的數(shù)據(jù)層肥荔，頁面需要的變量都寫在state層
dispatch：類似調(diào)度器，調(diào)用action層中的方法朝群，從而去回調(diào)effect燕耿，reducer層的方法
viewService：這個(gè)參數(shù)，我們可以使用其中的方法：buildComponent(“組件名”)姜胖，調(diào)用我們封裝的相關(guān)組件

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: () {
        ///點(diǎn)擊事件誉帅，調(diào)用action 計(jì)數(shù)自增方法
        dispatch(CountActionCreator.countIncrease());
      },
      child: Icon(Icons.add),
    ),
  );
}

action

該層是非常重要的模塊，頁面所有的行為都可以在本層直觀的看到

XxxxAction中的枚舉字段是必須的右莱，一個(gè)事件對應(yīng)有一個(gè)枚舉字段蚜锨，枚舉字段是：effect，reducer層標(biāo)識的入口
XxxxActionCreator類中的方法是中轉(zhuǎn)方法慢蜓，方法中可以傳參數(shù)亚再，參數(shù)類型可任意；方法中的參數(shù)放在Action類中的payload字段中晨抡，然后在effect氛悬，reducer中的action參數(shù)中拿到payload值去處理就行了
這地方需要注意下，默認(rèn)生成的模板代碼耘柱，return的Action類加了const修飾如捅，如果使用Action的payload字段賦值并攜帶數(shù)據(jù)，是會(huì)報(bào)錯(cuò)的调煎；所以這里如果需要攜帶參數(shù)镜遣，請去掉const修飾關(guān)鍵字

import 'package:fish_redux/fish_redux.dart';

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

class CountActionCreator {

  ///去effect層去處理自增數(shù)據(jù)
  static Action countIncrease() {
    return Action(CountAction.increase);
  }
  ///去reducer層更新數(shù)據(jù)，傳參可以放在Action類中的payload字段中士袄，payload是dynamic類型悲关，可傳任何類型
  static Action updateCount(int count) {
    return Action(CountAction.updateCount, payload: count);
  }
}

effect

如果在調(diào)用action里面的XxxxActionCreator類中的方法谎僻，相應(yīng)的枚舉字段，會(huì)在combineEffects中被調(diào)用寓辱，在這里戈稿，我們就能寫相應(yīng)的方法處理邏輯，方法中帶倆個(gè)參數(shù)：action讶舰，ctx
action：該對象中，我們可以拿到payload字段里面需了，在action里面保存的值
ctx：該對象中跳昼，可以拿到state的參數(shù)，還可以通過ctx調(diào)用dispatch方法肋乍，調(diào)用action中的方法鹅颊，在這里調(diào)用dispatch方法，一般是把處理好的數(shù)據(jù)墓造，通過action中轉(zhuǎn)到reducer層中更新數(shù)據(jù)

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

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

///自增數(shù)
void _onIncrease(Action action, Context<CountState> ctx) {
  ///處理自增數(shù)邏輯
  int count = ctx.state.count + 1;
  ctx.dispatch(CountActionCreator.updateCount(count));
}

reducer

該層是更新數(shù)據(jù)的堪伍，action中調(diào)用的XxxxActionCreator類中的方法，相應(yīng)的枚舉字段觅闽，會(huì)在asReducer方法中回調(diào)帝雇，這里就可以寫個(gè)方法，克隆state數(shù)據(jù)進(jìn)行一些處理蛉拙，這里面有倆個(gè)參數(shù)：state尸闸，action
state參數(shù)經(jīng)常使用的是clone方法，clone一個(gè)新的state對象孕锄；action參數(shù)基本就是拿到其中的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;
}

效果

點(diǎn)擊按鈕+1

截屏2020-08-26 23.46.25.png

Demo下載