Flutter Fish-Redux 精妙构建应用之基础篇

2023-09-10 04:23:38

初识Flutter之Fish-Redux（基础篇）

初识Fish-Redux

Fish-Redux是一个用于Flutter开发的页面管理框架，它采用Redux的思想，将页面状态和视图分离，使页面更易于管理和维护。Fish-Redux具有以下特点：

模块化： Fish-Redux将应用分为多个模块，每个模块包含自己的页面、数据和逻辑。这使得应用更易于扩展和维护。
可复用性： Fish-Redux中的组件可以被复用，这使得开发人员可以节省大量的时间和精力。
性能优化： Fish-Redux采用了很多性能优化技术，这使得应用运行更流畅。

集成Fish-Redux

一、引入插件

dependencies:
  fish_redux: ^0.3.0

二、安装插件

flutter packages get

编码实践

1. page.dart

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

import 'view.dart';

class xxxPage extends Page<xxxState, Map<String, dynamic>> {
  xxxPage()
      : super(
          initState: initState,
          view: buildView,
        );
}

xxxState initState(Map<String, dynamic> args) {
  return xxxState();
}

2. view.dart

import 'package:flutter/material.dart';

import 'state.dart';

class xxxView extends StatelessWidget {
  final xxxState state;

  xxxView(this.state);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('xxx'),
      ),
      body: Center(
        child: Text('xxx'),
      ),
    );
  }
}

3. state.dart

class xxxState implements Cloneable<xxxState> {

  @override
  xxxState clone() {
    return xxxState();
  }
}

4. effect.dart

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

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

Effect<xxxState> buildEffect() {
  return combineEffects(<Object, Effect<xxxState>>{
    xxxAction.action: _onAction,
  });
}

void _onAction(Action action, Context<xxxState> ctx) {}