需求:
· 在我的界面,展示了用户信息姓名、年龄、性别等信息
· 我的界面有一个设置按钮,可以修改这些用户信息
· 修改之后怎么刷新呢?
· 这时候就使用到全局状态管理
dependencies:
flutter:
sdk: flutter
flutter_redux: ^0.5.2 #全局状态管理机
eg:
// 再添加其他的全局类,都在初始化store时候添加进去
// YYRedux.dart
import 'package:ly_app/Model/UserInfo.dart'; // UserInfo类
import 'package:ly_app/Redux/UserInfoRedux.dart'; //UserInfoRedux类
// 需要全局的对象在YYState类里面添加
class YYState {
UserInfo userInfo;
YYState({this.userInfo});
}
// 创建store使用
YYState appReducer(YYState state, action) {
return YYState(
// 将全局对象和action关联
userInfo: UserInfoReducer(state.userInfo, action),
);
}
// UserInfoReducer.dart
import 'package:ly_app/Model/UserInfo.dart';
import 'package:redux/redux.dart'; // redux全局状态管理
/// redux 的 combineReducers, 通过 TypedReducer 将 UpdateUserInfoAction 与 reducers 关联起来
final UserInfoReducer = combineReducers<UserInfo>([
TypedReducer<UserInfo, UpdateUserInfoAction>(_updateLoaded),
]);
/// 如果有 UpdateUserAction 发起一个请求时
/// 就会调用到 _updateLoaded
/// _updateLoaded 这里接受一个新的userInfo,并返回
/// 更新全局对象时候调用的方法
UserInfo _updateLoaded(UserInfo userInfo, action) {
userInfo = action.userInfo;
return userInfo;
}
class UpdateUserInfoAction {
final UserInfo userInfo;
UpdateUserInfoAction(this.userInfo);
}
// main.dart
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:ly_app/MainPage.dart';
import 'package:ly_app/Model/UserInfo.dart';
import 'package:redux/redux.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:ly_app/Redux/YYRedux.dart';
void main() {
runApp(
new Rooter()
);
}
class Rooter extends StatelessWidget {
/// 在app入口 初始化全局状态管理对象store
/// StoreProvider 接收对象store
final store = new Store<YYState>(appReducer, initialState: new YYState(userInfo: UserInfo.empty()));
Rooter({Key key}) : super(key : key);
@override
Widget build(BuildContext context) {
return new StoreProvider(
store: store,
child: new StoreBuilder<YYState>(builder: (context, store) {
return new MainPage();
}
)
);
}
}
访问数据⏬
StoreProvider.of(context).state.userInfo;
更新数据⏬
StoreProvider.of(context).dispatch(new UpdateUserInfoAction(newUserInfo));
/// 在需要更新或者获取全局状态时候需要获取到store ⏬
Store<YYState> _getStore() {
if (context == null) {
print("YYState null");
return null;
}
return StoreProvider.of(context);
}
/// 点击事件 更新全局状态 1、创建对象 2、调用更新方法⏬
onPressed: () {
var map={"name":"更爱","id":2};
UserInfo newUserInfo = UserInfo.fromJson(map);
_getStore()?.dispatch(new UpdateUserInfoAction(newUserInfo));
}
/// 哪里需要使用全局状态,就在最外面new StoreBuilder⏬
@override
Widget build(BuildContext context) {
return new StoreBuilder<YYState>(builder: (context, store) {
return new Text(_getStore().state.userInfo.name)
});