fish-redux基础使用指南

在介绍使用方法之前，先介绍一个快捷创建fish_redux目录的插件

FishReduxTemplate快捷创建fish_redux目录

相关文章

• Fish Redux 之 State
• Fish Redux 之 Action
• Fish Redux 之 Reducer
• Fish Redux 之 Effect
• Fish Redux 之 Page
• Fish Redux 之 Component& Connector

Demo地址

核心思想：

• 通过view视图中按钮点击发送一个一个信号量(dispatch)
• effect注册监听信号量，并做出处理

实现效果：

• 点击按钮返回上层控制器

  
  
  

  Untitled4.gif

• 点击改变文字

  
  
  

  Untitled4.gif

代码部分

action.dart

import 'package:fish_redux/fish_redux.dart';

//TODO replace with your own action
enum BasicAction { action }

class BasicActionCreator {
  static Action onAction() {
    return const Action(BasicAction.action);
  }
}

effect.dart

import 'package:fish_redux/fish_redux.dart';
import 'action.dart';
import 'state.dart';
import 'package:my_flutter/Expand/Router/Routers.dart';

Effect buildEffect() {
  return combineEffects(>{
    BasicAction.action: _onAction,//注册监听的信号，实现对应方法
  });
}
///逻辑处理
void _onAction(Action action, Context ctx) {
  print('接收到信号名称为：action 并做出处理');
  Routers.pop(ctx.context);
}

view.dart

import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';

import 'action.dart';
import 'state.dart';

Widget buildView(BasicState state, Dispatch dispatch, ViewService viewService) {
  return Scaffold(
    appBar: AppBar(
      title: Text('fish_redux_basic'),
    ),
    floatingActionButton: FloatingActionButton(
      child: IconButton(
        icon: Icon(Icons.add_circle_outline),
        onPressed: () {
          print('发送信号量');
          dispatch(BasicActionCreator.onAction());
        },
      ),
    ),
  );
}

Demo地址