Flutter组件化开发插件fish_redux的使用

Flutter组件化开发插件Fish Redux的使用

Fish Redux

Build Status pub package codecov

Fish Redux是什么？

Fish Redux 是一个基于 Redux 状态管理的 Flutter 应用框架。它适用于构建中大型应用程序。

它具有以下四个特点：

  1. 函数式编程
  2. 可预测的状态容器
  3. 可插拔的组件化
  4. 非破坏性的性能

架构图

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  fish_redux: ^0.3.4+1

然后运行 flutter packages get 来安装。

文档

语言：英文 | 中文简体

示例

示例代码

// example/lib/main.dart
import 'package:flutter/material.dart' hide Action, Page;

import 'app.dart';

void main() => runApp(createApp());

Fish Redux与Redux的区别

了解Fish Redux与Redux之间的区别可以参考这里。

插件

代码模板

开发工具

许可证

Fish Redux 是在 Apache 2.0 许可证下发布的。详情见LICENSE。

关于我们

阿里巴巴-闲鱼技术是国内最早也是最大规模线上运行Flutter的团队。

我们在公众号中为你精选了Flutter独家干货，全面而深入。

内容包括：Flutter的接入、规模化应用、引擎探秘、工程体系、创新技术等教程和开源信息。

架构／服务端／客户端／前端／质量工程师 在公众号中投递简历，名额不限哦

欢迎来闲鱼做一个好奇、幸福、有影响力的程序员，简历投递：tino.wjf@alibaba-inc.com

订阅地址

For English


更多关于Flutter组件化开发插件fish_redux的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter组件化开发插件fish_redux的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


fish_redux 是 Flutter 中的一个状态管理框架，它基于 Redux 思想，并结合了 Flutter 的特性，提供了一套组件化开发的解决方案。fish_redux 的核心思想是将页面拆分为多个可复用的组件，每个组件都有自己的状态和行为，通过 Redux 的状态管理机制来协调各个组件之间的交互。

1. 安装 fish_redux

首先，你需要在 pubspec.yaml 文件中添加 fish_redux 依赖：

dependencies:
  flutter:
    sdk: flutter
  fish_redux: ^0.3.4

然后运行 flutter pub get 来安装依赖。

2. 基本概念

fish_redux 中的核心概念包括：

  • State: 组件的状态，通常是一个 Dart 类。
  • Action: 触发状态变化的事件。
  • Reducer: 根据 Action 来更新 State 的函数。
  • Effect: 处理副作用（如网络请求、异步操作等）的函数。
  • View: 根据 State 来构建 UI 的函数。

3. 创建一个简单的组件

3.1 定义 State

首先，定义一个组件的状态类：

class CounterState {
  int count;

  CounterState({this.count = 0});
}

3.2 定义 Action

定义触发状态变化的 Action：

enum CounterAction { increment }

3.3 定义 Reducer

Reducer 是一个纯函数，它根据 Action 来更新 State：

CounterState _reducer(CounterState state, dynamic action) {
  if (action == CounterAction.increment) {
    return CounterState(count: state.count + 1);
  }
  return state;
}

3.4 定义 Effect

Effect 处理副作用，比如异步操作：

void _effect(CounterState state, Action action, Context<CounterState> ctx) {
  if (action.type == CounterAction.increment) {
    // 这里可以执行一些异步操作
    ctx.dispatch(CounterAction.increment);
  }
}

3.5 定义 View

View 根据 State 来构建 UI：

Widget _view(CounterState state, Dispatch dispatch, ViewService viewService) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Counter Example'),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'Count: ${state.count}',
            style: TextStyle(fontSize: 24),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () => dispatch(CounterAction.increment),
            child: Text('Increment'),
          ),
        ],
      ),
    ),
  );
}

3.6 创建组件

将以上部分组合成一个组件：

import 'package:fish_redux/fish_redux.dart';

class CounterComponent extends Component<CounterState> {
  CounterComponent()
      : super(
          view: _view,
          reducer: _reducer,
          effect: _effect,
        );
}

4. 使用组件

在页面中使用这个组件：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fish Redux Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CounterPage(),
    );
  }
}

class CounterPage extends Page<CounterState, Map<String, dynamic>> {
  CounterPage()
      : super(
          initState: (Map<String, dynamic> args) => CounterState(),
          view: CounterComponent().buildComponent(),
        );
}
回到顶部