flutterredux_Flutter+Redux—如何制作购物清单应用程序？

作者：bell723_893 | 来源：互联网 | 2023-07-25 09:38

flutterredux嗨，大家好！在本文中，我想向您展示如何使用Redux创建Flutter应用程序。如果您不知道Flutter是什么&

flutter redux

嗨&＃xff0c;大家好&＃xff01; 在本文中&＃xff0c;我想向您展示如何使用Redux创建Flutter应用程序。如果您不知道Flutter是什么&＃xff0c;我鼓励您阅读我的文章Flutter-您可能会喜欢它的5个原因。但是&＃xff0c;如果您知道Flutter是什么&＃xff0c;并且想要创建一个设计良好&＃xff0c;易于测试且行为可预测的应用程序&＃xff0c;那么请继续阅读&＃xff01;

什么是Redux&＃xff1f;

首先&＃xff0c;让我们开始解释什么是Redux 。 Redux是一种应用程序架构&＃xff0c;最初是为Javascript制作的&＃xff0c;现在已在使用React式框架 &＃xff08;例如React Native或Flutter&＃xff09;构建的应用程序中使用。 Redux是Facebook制造的Flux架构的简化版本。但是Redux到底有什么用呢&＃xff1f; 基本上&＃xff0c;您需要了解三件事&＃xff1a;

有一个真实的来源 —您的整个应用程序状态仅保存在一个地方&＃xff08;称为存储&＃xff09;
状态为只读 -要更改应用程序状态&＃xff0c;您需要分派操作&＃xff0c;然后创建新状态
使用纯函数进行更改-纯函数&＃xff08;为简化起见&＃xff0c;它是没有副作用的函数&＃xff09;采用先前的状态和操作&＃xff0c;然后返回新状态

听起来很酷&＃xff0c;但是该解决方案的优点是什么&＃xff1f;

我们可以控制状态 -这意味着我们完全知道导致状态更改的原因&＃xff0c;没有重复的状态&＃xff0c;我们可以轻松地跟踪数据流
纯reducer函数易于测试 -我们可以通过状态&＃xff0c;操作和测试结果是否正确
应用程序的结构清晰 -我们在操作&＃xff0c;模型&＃xff0c;业务逻辑等方面具有不同的层次-因此您完全知道在哪里放置另一个新功能
对于更复杂的应用程序而言&＃xff0c;它是一个很好的体系结构 -您无需将状态从父级到子级传递给整个视图树
还有一个…

Redux时间旅行

Redux中可能有一项很酷的功能-&＃x1f389; 时间旅行 &＃xff01; 使用Redux和适当的工具&＃xff0c;您可以随时跟踪应用程序状态 &＃xff0c;检查实际状态并随时重新创建它 。实际使用此功能&＃xff1a;

Redux Widgets一个简单的例子

以上所有规则使数据在Redux中单向流动。但是这是什么意思&＃xff1f; 实际上&＃xff0c;这都是通过动作&＃xff0c;reduce&＃xff0c;store和states完成的 。让我们想象一下显示按钮计数器的应用程序&＃xff1a;

您的应用程序开始时具有某种状态 &＃xff08;点击数&＃xff0c;即0&＃xff09;
基于该状态视图被呈现。
如果用户点击按钮&＃xff0c; 则会发送操作 &＃xff08;例如&＃xff0c;IncrementCounter&＃xff09;
由reducer接收动作&＃xff0c; reduce知道先前的状态&＃xff08;计数器0&＃xff09;&＃xff0c;接收动作&＃xff08;IncrementCounter&＃xff09;并可以返回新状态&＃xff08;计数器1&＃xff09;。
您的应用程序具有新状态 &＃xff08;计数器1&＃xff09;
基于新状态&＃xff0c;再次渲染视图

如您所见&＃xff0c;一般来说&＃xff0c; 一切都与国家有关 。您只有一个应用状态 &＃xff0c;该状态对于查看是只读的&＃xff0c;要创建新状态&＃xff0c;您需要发送操作。发送动作会触发reducer来创建并发出新的应用程序状态。历史在重演。

带Redux的购物清单应用程序示例

让我在更多高级示例中展示Redux如何在实践中工作。我们将创建一个简单的ShoppingCart应用程序。在此应用程序中&＃xff0c;将具有以下功能&＃xff1a;

添加项目
将项目标记为已选中
基本上就是all

该应用程序将如下所示&＃xff1a;

您可以在GitHub上查看整个应用程序代码&＃xff1a;

pszklarska / FlutterShoppingCart
FlutterShoppingCart-使用Redux架构 github.com 的购物应用程序的Flutter示例

让我们从编码开始&＃xff01; &＃x1f447;

先决条件

在本文中&＃xff0c;我不会显示为此应用程序创建UI。您可以在此处实现Redux之前检查此购物清单应用程序的代码。从这一点开始&＃xff0c;我们将进行编码&＃xff0c;并将Redux添加到该应用程序中。

如果您以前从未使用过Flutter&＃xff0c;建议您尝试使用Google的Flutter Codelabs 。

建立

要在Flutter上与Redux一起运行&＃xff0c;您需要将依赖项添加到pubspec.yaml文件中&＃xff1a;

flutter_redux: ^0.5.2

您可以在flutter_redux软件包页面上查看最新版本。

模型

我们的应用程序需要管理添加和更改项目&＃xff0c;因此我们将使用简单的CartItem模型来存储单个项目状态。 我们整个应用程序的状态将只是CartItems的列表 。如您所见&＃xff0c;CartItem只是一个普通的Dart对象。

class CartItem {
String name;
bool checked;

CartItem (this.name, this.checked);
}

动作

首先&＃xff0c;我们需要声明action 。动作基本上是可以用来更改应用程序状态的任何意图。在我们的应用程序中&＃xff0c;我们将执行两个操作&＃xff0c;用于添加和更改项目&＃xff1a;

class AddItemAction {
final CartItem item;

AddItemAction (this.item);
}

class ToggleItemStateAction {
final CartItem item;

ToggleItemStateAction (this.item);
}

减速器

然后&＃xff0c;我们需要告诉我们的应用程序这些动作应该做什么。这就是为什么reducer适用于它们-它们只获取当前应用程序状态和操作&＃xff0c;然后创建并返回新的应用程序状态 。我们将有两种reducer方法&＃xff1a;

List appReducers (List items, dynamic action) {
if (action is AddItemAction) {
return addItem(items, action) ;
} else if (action is ToggleItemStateAction) {
return toggleItemState(items, action) ;
}
return items;
}

List addItem (List items, AddItemAction action) {
return List.from(items)..add(action.item);
}

List toggleItemState (List items, ToggleItemStateAction action) {
return items.map((item) &＃61;> item.name &＃61;&＃61; action.item.name ?
action.item : item).toList();
}

方法appReducers()将操作委派给适当的方法。方法addItem()和toggleItemState()返回新列表-这是我们的新应用程序状态。如您所见&＃xff0c; 您不应该修改当前列表 。取而代之的是&＃xff0c;我们每次都创建新列表。

商店提供者

现在&＃xff0c;当我们有动作和简化器时&＃xff0c;我们需要提供存储应用程序状态的地方。它在Redux中称为store &＃xff0c;它是我们应用程序的唯一事实来源 。

void main() {
final store &＃61; new Store>(
appReducers,
initialState: new List());

runApp(new FlutterReduxApp(store));
}

要创建商店&＃xff0c;我们需要传递reducers方法和初始应用程序状态 。如果创建了商店&＃xff0c;则必须将其传递给StoreProvider&＃xff0c;以告知我们的应用程序任何想要请求应用程序状态的人都可以使用它&＃xff1a;

class FlutterReduxApp extends StatelessWidget {
final Store> store;

FlutterReduxApp(this.store);

&＃64;override
Widget build(BuildContext context) {
return new StoreProvider>(
store: store,
child: new ShoppingCartApp(),
);
}
}

在上面的示例中&＃xff0c; ShoppingCartApp()是主应用程序小部件。

StoreConnector

目前&＃xff0c;我们拥有除……实际添加和更改项之外的所有内容。怎么做&＃xff1f; 为了使其成为可能&＃xff0c;我们需要使用StoreConnector 。这是一种获取商店并对其执行某些操作或读取其状态的方法 。

首先&＃xff0c;我们想读取当前数据并将其显示在列表中 &＃xff1a;

class ShoppingList extends StatelessWidget {
&＃64;override
Widget build(BuildContext context) {
return new StoreConnector, List> (
converter: (store) &＃61;> store.state,
builder: (context, list) {
return new ListView.builder(
itemCount: list.length,
itemBuilder: (context, position) &＃61;>
new ShoppingListItem(list[position]));
},
);
}
}

上面的代码用StoreConnector包装默认的ListView.builder 。 StoreConnector可以采用当前应用程序状态&＃xff08;即List &＃xff09;&＃xff0c;并将其与converter功能映射到任何内容。对于这种情况&＃xff0c;它将是相同的状态&＃xff08; List &＃xff09;&＃xff0c;因为我们需要这里的整个列表。

接下来&＃xff0c;在builder的功能&＃xff0c;我们得到list -这基本上是从CartItems名单store &＃xff0c;我们可以用它构建的ListView。

好的&＃xff0c;很酷-我们在这里读取数据。现在如何设置一些数据&＃xff1f;

为此&＃xff0c;我们还将使用StoreConnector &＃xff0c;但方式略有不同。

class AddItemDialog extends StatelessWidget {
&＃64;override
Widget build(BuildContext context) {
return new StoreConnector, OnItemAddedCallback>(
converter: (store) {
return (itemName) &＃61;>
store.dispatch(AddItemAction(CartItem(itemName, false)));
} , builder: (context, callback) {
return new AddItemDialogWidget( callback );
});
}
}

typedef OnItemAddedCallback &＃61; Function(String itemName);

让我们看一下代码。与上一个示例一样&＃xff0c;我们使用了StoreConnector &＃xff0c;但是这次&＃xff0c;不是将CartItems列表映射到同一列表中&＃xff0c;而是将其映射到OnItemAddedCallback 。这样&＃xff0c;我们可以将回调传递给AddItemDialogWidget &＃xff0c;并在用户添加一些新项时调用它&＃xff1a;

class AddItemDialogWidgetState extends State {
String itemName;

final OnItemAddedCallback callback;
AddItemDialogWidgetState(this.callback);

&＃64;override
Widget build(BuildContext context) {
return new AlertDialog(
...
actions: [
...
new FlatButton(
child: const Text(&＃39;ADD&＃39;),
onPressed: () {
...
callback(itemName);
})
],
);
}
}

现在&＃xff0c;每当用户按下“ ADD”按钮时&＃xff0c;回调将调度AddItemAction()事件。

现在&＃xff0c;我们可以为切换项目状态做非常相似的事情&＃xff1a;

class ShoppingListItem extends StatelessWidget {
final CartItem item;

ShoppingListItem(this.item);

&＃64;override
Widget build(BuildContext context) {
return new StoreConnector, OnStateChanged> (
converter: (store) {
return (item) &＃61;> store.dispatch(ToggleItemStateAction(item));
}, builder: (context, callback) {
return new ListTile(
title: new Text(item.name),
leading: new Checkbox(
value: item.checked,
onChanged: (bool newValue) {
callback(CartItem(item.name, newValue));
}),
);
});
}
}

typedef OnStateChanged &＃61; Function(CartItem item);

与前面的示例一样&＃xff0c;我们使用StoreConnector将List映射到OnStateChanged回调中。现在&＃xff0c;每次更改复选框&＃xff08;在onChanged方法中&＃xff09;时&＃xff0c;回调都会触发ToggleItemStateAction事件。

摘要

就这样&＃xff01; 在本文中&＃xff0c;我们使用Redux架构创建了一个简单的Shopping List应用程序。在我们的应用程序中&＃xff0c;我们可以添加一些项目并更改其状态。 向此应用程序添加新功能就像添加新动作和简化程序一样简单。

在这里&＃xff0c;您可以检查此应用程序的完整源代码&＃xff0c;包括Time Travel小部件&＃xff1a;

pszklarska / FlutterShoppingCart
FlutterShoppingCart-使用Redux架构 github.com 的购物应用程序的Flutter示例

希望您喜欢这篇文章&＃xff0c;并继续关注&＃xff01; &＃x1f64c;

flutter redux

推荐阅读

string
深入解析 Android 中 EditText 的 getLayoutParams 方法及其代码应用实例

深入解析 Android 中 EditText 的 getLayoutParams 方法及其代码应用实例 ... [详细]

蜡笔小新 2024-11-07 20:50:46
string
使用 ListView 浏览安卓系统中的回收站文件

使用 ListView 浏览安卓系统中的回收站文件 ... [详细]

蜡笔小新 2024-11-09 16:34:55
string
Java 15 发布，带来多项重要更新！

2020年9月15日，Oracle正式发布了最新的JDK 15版本。本次更新带来了许多新特性，包括隐藏类、EdDSA签名算法、模式匹配、记录类、封闭类和文本块等。 ... [详细]

蜡笔小新 2024-11-14 12:11:09
string
Java 中 com.apollographql.apollo.api.internal.Optional.orNull() 方法详解与示例

本文详细介绍了 com.apollographql.apollo.api.internal.Optional 类中的 orNull() 方法，并提供了多个实际代码示例，帮助开发者更好地理解和使用该方法。 ... [详细]

蜡笔小新 2024-11-14 15:03:23
string
Android Studio SQLite 数据库增删改查简单（代码参考）

一个建表一个执行crud操作建表代码importandroid.content.Context;importandroid.database.sqlite.SQLiteDat ... [详细]

蜡笔小新 2024-11-14 11:01:49
string
Java 编程错误：对象无法转换为 long 类型

本文介绍了在 Java 编程中遇到的一个常见错误：对象无法转换为 long 类型，并提供了详细的解决方案。 ... [详细]

蜡笔小新 2024-11-13 10:57:24
string
Java 并发编程：深入解析 AtomicInteger 和 CAS 无锁算法

在多线程并发环境中，普通变量的操作往往是线程不安全的。本文通过一个简单的例子，展示了如何使用 AtomicInteger 类及其核心的 CAS 无锁算法来保证线程安全。 ... [详细]

蜡笔小新 2024-11-12 16:40:04
string
com.hazelcast.config.MapConfig.isStatisticsEnabled()方法的使用及代码示例

com.hazelcast.config.MapConfig.isStatisticsEnabled()方法的使用及代码示例 ... [详细]

蜡笔小新 2024-11-12 14:33:17
string
深入解析 Lifecycle 的实现原理

本文将详细介绍 Android Jetpack 中 Lifecycle 组件的实现原理，帮助开发者更好地理解和使用 Lifecycle，避免常见的内存泄漏问题。 ... [详细]

蜡笔小新 2024-11-12 14:05:19
string
Java并发编程指南：深入理解信号量机制

本文是Java并发编程系列的开篇之作，将详细解析Java 1.5及以上版本中提供的并发工具。文章假设读者已经具备同步和易失性关键字的基本知识，重点介绍信号量机制的内部工作原理及其在实际开发中的应用。 ... [详细]

蜡笔小新 2024-11-11 15:49:02
string
如何使用 `org.eclipse.rdf4j.query.impl.MapBindingSet.getValue()` 方法及其代码示例详解

如何使用 `org.eclipse.rdf4j.query.impl.MapBindingSet.getValue()` 方法及其代码示例详解 ... [详细]

蜡笔小新 2024-11-11 02:42:52
string
深入解析 Android TextView 中 getImeActionLabel() 方法的使用与代码示例

深入解析 Android TextView 中 getImeActionLabel() 方法的使用与代码示例 ... [详细]

蜡笔小新 2024-11-04 19:48:30
string
开发笔记：深入解析Android自定义控件——Button的72种变形技巧

开发笔记：深入解析Android自定义控件——Button的72种变形技巧 ... [详细]

蜡笔小新 2024-11-03 17:42:23
go
移动开发人员晋升与加薪必备的八大技能，值得珍藏

经过半年的精心整理，我们汇总了当前市场上最全面的Android面试题解析，为移动开发人员的晋升和加薪提供了宝贵的参考资料。本书详细涵盖了从基础到高级的各类面试题，帮助读者全面提升技术实力和面试表现。章节目录包括：- 第一章：Android基础面试题- 第二章：... ... [详细]

蜡笔小新 2024-11-02 19:22:15
web
探索Web 2.0新概念：Widget

尽管你可能尚未注意到Widget，但正如几年前对RSS的陌生一样，这一概念正逐渐走入大众视野。据美国某权威杂志预测，2007年将是Widget年。本文将详细介绍Widget的定义、功能及其未来发展趋势。 ... [详细]

蜡笔小新 2024-11-12 18:36:54

bell723_893

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章