摘要:接着我们定义了一个函数,用于更新状态。更新创建一个持久化器从中加载上一次存储的状态重新当前应用,即完成了持久化,可以登录,然后退出应用,再重新打开应用,可以看到上一次的登录状态是存在的。
好久没在 SegmentFault 写东西,唉,也不知道 是忙还是懒,以后有时间 再慢慢写起来吧,最近开始学点新东西,有的写了,个人博客跟这里同步。
一直都在自己的 React Native 应用中使用 Redux,其实更大情况下也是使用它来管理应用的会话状态以及当前登录的用户信息等等简单的数据,很好用,自从 Google 发布 Flutter 之后,就一直想着拿它来做点啥,准备拿一个新项目开刀,先研究下怎么把以前在 React Native 中需要用到的一些技术在 Flutter 找到对应的实现方法,本文记录下 Flutter + Redux + Redux Persist 的实现。
原文地址:Flutter + Redux + Redux Persist 应用
项目地址:https://github.com/pantao/flutter-redux-demo-app
flutter create redux_demo_app cd redux_demo_app code .
Flutter 项目必须是一个合法的 Dart 包,而 Dart 包要求使用纯小写字母(可包含下划线),这个跟 React Native 是不一样的。第二步:添加依懒
我们依懒下面这些包:
Redux : JavaScript Redux 的复刻版
Flutter Redux:类似于 React Redux 一样,让我们在 Flutter 项目中更好的使用 Redux
Redux Persist:Redux 持久化
Redux Persist Flutter:Flutter Redux Persist 引擎
打开 pubspec.yaml,在 dependencies 中添加下面这些依懒:
... dependencies: ... redux: ^3.0.0 flutter_redux: ^0.5.2 redux_persist: ^0.8.0 redux_persist_flutter: ^0.8.0 dev_dependencies: ... ...第三步:了解需求
本次我想做的一个App有下面四个页面:
首页
个人中心页
个人资料详情页
登录页
交互是下面这样的:
应用打开之后,打开的是一个有两个底部 Tab 的应用,默认展示的是首页
当用户点击(我的)这个Tab时:
若当前用户已登录,则Tab切换为个人中心页
若当前用户未登录,则以 Modal 的方式弹出登录页
添加 lib/state.dart 文件内容如下:
enum Actions{ login, logout } /// App 状态 /// /// 状态中所有数据都应该是只读的,所以,全部以 get 的方式提供对外访问,不提供 set 方法 class AppState { /// J.W.T String _authorizationToken; // 获取当前的认证 Token get authorizationToken => _authorizationToken; // 获取当前是否处于已认证状态 get authed => _authorizationToken.length > 0; AppState(this._authorizationToken); } /// Reducer AppState reducer(AppState state, action) { switch(action) { case Actions.login: return AppState("J.W.T"); case Actions.logout: return AppState(""); default: return state; } }
在上面的代码中,我们先声明了 Actions 枚举,以及一个 AppState 类,该类就是我们的应用状态类,使用 _authorizationToken 保证认证的值不可被实例外直接被访问到,这样用户就无法去直接修改它的值,再提供了两个 get 方法,提供给外部访问它的值。
接着我们定义了一个 reducer 函数,用于更新状态。
创建 app.dartimport "package:flutter/material.dart"; import "package:redux/redux.dart"; import "package:flutter_redux/flutter_redux.dart"; import "state.dart"; import "root.dart"; /// 示例App class DemoApp extends StatelessWidget { // app store final Storestore; DemoApp(this.store); @override Widget build(BuildContext context) { return StoreProvider ( store: store, child: new MaterialApp( title: "Flutter Redux Demo App", // home 为 root 页 home: Root() ), ); } }
在上面我们已经完成的 App 类的编码,现在需要完成 Root 页,也就是我们的App入口页。
创建 Root 页import "package:flutter/material.dart"; import "package:redux/redux.dart"; import "package:flutter_redux/flutter_redux.dart"; /// 状态 import "state.dart"; /// 登录页面 import "auth.dart"; /// 我的页面 import "me.dart"; /// 首页 import "home.dart"; /// 应用入口页 class Root extends StatefulWidget { @override State创建 HomecreateState() { return _RootState(); } } /// 入口页状态 class _RootState extends State { /// 当前被激活的 Tab Index int _currentTabIndex; /// 所有 Tab 列表页 List _tabPages; @override void initState() { super.initState(); // 初始化 tab 为第 0 个 _currentTabIndex = 0; // 初始化页面列表 _tabPages = [ // 首页 Home(), // 我的 Me() ]; } @override Widget build(BuildContext context) { // 使用 StoreConnector 创建 Widget // 类似于 React Redux 的 connect,链接 store state 与 Widget return StoreConnector >( // store 转换器,类似于 react redux 中的 mapStateToProps 方法 // 接受参数为 `store`,再返回的数据可以被在 `builder` 函数中使用, // 在此处,我们直接返回整个 store, converter: (store) => store, // 构建器,第二个参数 store 就是上一个 converter 函数返回的 store builder: (context, store) { // 取得当前是否已登录状态 final authed = store.state.authed; return new Scaffold( // 如果已登录,则直接可以访问所有页面,否则展示 Home body: authed ? _tabPages[_currentTabIndex] : Home(), // 底部Tab航 bottomNavigationBar: BottomNavigationBar( onTap: (int index) { // 如果点击的是第 1 个Tab,且当前用户未登录,则直接打开登录 Modal 页 if (!authed && index == 1) { Navigator.push( context, MaterialPageRoute( builder: (context) => Auth(), fullscreenDialog: true ) ); // 否则直接进入相应页面 } else { setState(() { _currentTabIndex = index; }); } }, // 与 body 取值方式类似 currentIndex: authed ? _currentTabIndex : 0, items: [ BottomNavigationBarItem( icon: Icon(Icons.home), title: Text("首页") ), BottomNavigationBarItem( icon: Icon(Icons.people), title: Text("我的") ) ], ), ); }, ); } }
与 Root 页面类似,我们可以在任何页面方便的使用 AppState
import "package:flutter/material.dart"; import "package:redux/redux.dart"; import "package:flutter_redux/flutter_redux.dart"; import "state.dart"; import "auth.dart"; class Home extends StatefulWidget { @override State完成 AuthcreateState() => _HomeState(); } class _HomeState extends State { @override Widget build(BuildContext context) { return StoreConnector >( converter: (store) => store, builder: (context, store) { return Scaffold( appBar: AppBar( title: Text("首页"), ), body: Center( child: store.state.authed ? Text("您已登录") : FlatButton( child: Text("去登录"), onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => Auth(), fullscreenDialog: true ) ); }, ) ), ); }, ); } }
在前面的所有页面中,都只是对 store 中状态树的读取,现在的 Auth 就需要完成对状态树的更新了,看下面代码:
import "package:flutter/material.dart"; import "package:redux/redux.dart"; import "package:flutter_redux/flutter_redux.dart"; import "state.dart"; class Auth extends StatefulWidget { @override State创建 MecreateState() => _AuthState(); } class _AuthState extends State { @override Widget build(BuildContext context) { return StoreConnector >( converter: (store) => store, builder: (context, store) { return Scaffold( appBar: AppBar( title: Text("登录"), ), body: Center( child: FlatButton( child: Text("登录"), onPressed: () { // 通过 store.dispatch 函数,可以发出 action(跟 Redux 是一样的),而 Action 是在 // AppState 中定义的枚举 Actions.login store.dispatch(Actions.login); // 之后,关闭当前的 Modal,就可以看到应用所有数据都更新了 Navigator.pop(context); }, ) ), ); }, ); } }
有了登录之后,我们可以在做一个我的页面,在这个页面里面我们可以完成退出功能。
import "package:flutter/material.dart"; import "package:redux/redux.dart"; import "package:flutter_redux/flutter_redux.dart"; import "state.dart"; class Me extends StatefulWidget { @override State添加状态持久化createState() => _MeState(); } class _MeState extends State { @override Widget build(BuildContext context) { return StoreConnector >( converter: (store) => store, builder: (context, store) { return Scaffold( appBar: AppBar( title: Text("退出"), ), body: Center( child: FlatButton( child: Text("退出"), onPressed: () { store.dispatch(Actions.logout); // 此处我们不需要去更新Tab Index,在 Root 页面中,对 store 里面的 authed 值已经做了监听,如果 // Actions.logout 被触发后, authed 的值会变成 false,那么App将自动切换首页 }, ) ), ); }, ); } }
在上面,我们已经完成了一个基于 Redux 的同步状态的App,但是当你的App关闭重新打开之外,状态树就会被重置为初始值,这并不理想,我们经常需要一个用户完成登录之后,就可以在一断时间内一直保持这个登录状态,而且有一些数据我们并不希望每次打开App的时候都重新初始化一次,这个时候,可以考虑对状态进行持久化了。
更新 state.dartclass AppState { ... // 持久化时,从 JSON 中初始化新的状态 static AppState fromJson(dynamic json) => json != null ? AppState(json["authorizationToken"] as String) : AppState(""); // 更新状态之后,转成 JSON,然后持久化至持久化引擎中 dynamic toJson() => {"authorizationToken": _authorizationToken}; }
这里我们添加了两个方法,一个是静态的 fromJson 方法,它将在初始化状态树时被调用,用于从 JSON 中初始化一个新的状态树出来, toJson 将被用于持久化,将自身转成 JSON。
更新 main.dartimport "package:flutter/material.dart"; import "package:redux/redux.dart"; import "package:redux_persist/redux_persist.dart"; import "package:redux_persist_flutter/redux_persist_flutter.dart"; import "app.dart"; import "state.dart"; void main() async { // 创建一个持久化器 final persistor = Persistor( storage: FlutterStorage(), serializer: JsonSerializer (AppState.fromJson), debug: true ); // 从 persistor 中加载上一次存储的状态 final initialState = await persistor.load(); final store = Store ( reducer, initialState: initialState ?? AppState(""), middleware: [persistor.createMiddleware()] ); runApp(new DemoApp(store)); }
重新 flutter run 当前应用,即完成了持久化,可以登录,然后退出应用,再重新打开应用,可以看到上一次的登录状态是存在的。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/37008.html
摘要:版版版是一个基于编写,使用豆瓣开源开发的一个项目。提示左右豆瓣把开源关了,现在使用的别的开发者的地址,项目是抽出来的后期可以自己改,现在项目使用的是,可以正常运行。 React版Mung React-Native版Mung Flutter版Mung Mung-Flutter 1. Mung-Flutter:是一个基于Flutter编写,使用豆瓣开源API开发的一个项目。 showImg...
摘要:版版版是一个基于编写,使用豆瓣开源开发的一个项目。提示左右豆瓣把开源关了,现在使用的别的开发者的地址,项目是抽出来的后期可以自己改,现在项目使用的是,可以正常运行。 React版Mung React-Native版Mung Flutter版Mung Mung-Flutter 1. Mung-Flutter:是一个基于Flutter编写,使用豆瓣开源API开发的一个项目。 showImg...
摘要:版版版是一个基于编写,使用豆瓣开源开发的一个项目。提示左右豆瓣把开源关了,现在使用的别的开发者的地址,项目是抽出来的后期可以自己改,现在项目使用的是,可以正常运行。React版Mung React-Native版Mung Flutter版Mung Mung-Flutter 1. Mung-Flutter:是一个基于Flutter编写,使用豆瓣开源API开发的一个项目。 showImg(ht...
摘要:首先我们想到的就是,是没有时间限制的数据存储,我们可以通过它来实现数据的持久化存储。那么有没有结合来达到持久数据存储功能的框架呢当然,它就是。会将的中的数据缓存到浏览器的中。 在React项目中,我们经常会通过redux以及react-redux来存储和管理全局数据。但是通过redux存储全局数据时,会有这么一个问题,如果用户刷新了网页,那么我们通过redux存储的全局数据就会被全部清...
摘要:的使用用户发出函数算出新的重新渲染三大原则单一数据源,利用的形式向下传播数据流决定只读,通过修改通过纯函数来修改组件状态,是描述动作的纯函数连接和基于全局的,选择我们要注入的不同的组件分开把注入,读取方法三剑客先确定一下初始状 redux的使用 react-native, react, react-redux, react-navigaition, redux-thunk, redu...
阅读 842·2021-11-22 13:54
阅读 2240·2021-09-22 15:36
阅读 2524·2019-08-30 15:54
阅读 591·2019-08-30 15:53
阅读 2998·2019-08-30 15:53
阅读 340·2019-08-29 15:21
阅读 2736·2019-08-28 18:28
阅读 2880·2019-08-26 13:37