Flutter is Google (the world's leading Internet technology company) produced, back hard enough, there is no doubt Flutter is about to or have already become mainstream, Flutter great ambition cross-platform development, not only impact on native development, and is likely to burn the Web front-end . As you move the developer's end, if not concerned about Flutter, it is indeed unreasonable it!
Flutter State Management (Redux) flutter_redux applications
And when not Redux, Redux when needed
If your UI layer is very simple, not a lot of interaction, Redux is unnecessary, but with the increase in complexity.
1. The user is very simple to use
no collaboration among users 2.
3. The server does not need to interact with a large number, but also do not use a WebSocket
4. view layer (View) acquires data only from a single source
such circumstances above, do not require the use of Redux .
1. The user's use of complex
2. Different users have different identities use (such as ordinary users and administrators)
can collaborate between multiple users 3.
4. a lot of interaction with the server
5.View acquired from multiple sources data
above Redux these cases is applicable scene: more than interactive, multi-data source.
From the assembly point of view, if you use the following scenario, consider using Redux.
1. The state of a component, need to share
2. a desired state can get anywhere
3. A change global state component
4. The components of a need to change the state of another component
When the above situation occurs, if the state is not used Redux or other management tools, not in accordance with certain rules read processing status code will soon become a mess. You need a mechanism to query the status of in the same place, to change the state change propagation state.
In short, do not Redux as a cure-all, if your application is not so complicated, there is no need to use it. On the other hand, Redux only state management of a solution, you can also choose other options.
Such as: Provider
First, the effect of FIG.
Interface initialization state
Click the button to initiate a Redux Action update interface (ie, updated State)
Redux workflow
2, Flutter integrated flutter_redux
Add flutter_redux in pubspec.yaml document, the current version 1.1.0:
flutter_redux: ^0.5.3
2. Create a user entity
class User{
var name;
User(this.name);
void setName(String name) {
this.name = name;
}
String get getName => this.name;
// 命名构造函数
User.empty();
}
3. Create State (YDCState)
(1) Store object contains all of the data. If you want to get data from one point in time, it is necessary to generate a snapshot Store. This data collection point, called a State.
(2) Redux provides a State corresponds to a View. As long as the same State, View just the same. You know State, you know what kind View, and vice versa.
import 'package:ydcflutter_app/test/bean/User.dart';
import 'package:ydcflutter_app/redux/user_redux.dart';
///全局Redux store 的对象，保存State数据
class YDCState {
///用户信息
User user;
///构造方法
YDCState({this.user});
}
4 Create Action
(1) State the change will result in a change of View. However, users of the reach of State, can only be access to the View. Therefore, the State must be View changes caused. Action is issued notice View, represents State should change to happen.
(2) Action describes what is going on. The only way to change the State, that is, the use of Action. It will transport the data to the Store.
/// 如果有 UpdateUserAction 发起一个请求时
/// 就会调用到 _updateLoaded
/// _updateLoaded 这里接受一个新的userInfo，并返回
User _updateLoaded(User user, action) {
user = action.user;
return user;
}
///定一个 UpdateUserAction ，用于发起 userInfo 的的改变
///类名随你喜欢定义，只要通过上面TypedReducer绑定就好
class UpdateUserAction {
final User user;
UpdateUserAction(this.user);
}
5. Create a reducer
(1) Store after receipt of Action, must be given a new State, so that View will change. This calculation is called the State Reducer.
(2) redux of combineReducers, by the UpdateUserAction TypedReducer be associated with the reducers
(. 3) the Reducer is a function that takes a current State and Action as a parameter and returns a new State.
///创建 Reducer
///源码中 Reducer 是一个方法 typedef State Reducer<State>(State state, dynamic action);
///我们自定义了 appReducer 用于创建 store
YDCState appReducer(YDCState state, action) {
return YDCState(
///通过自定义 UserReducer 将 YDCState 内的 userInfo 和 action 关联在一起
user: UserReducer(state.user, action),
);
}
final UserReducer = combineReducers<User>([
TypedReducer<User, UpdateUserAction>(_updateLoaded),
]);
The above steps and code in YDCState in user_redux.dart
YDCState code is as follows:
import 'package:ydcflutter_app/test/bean/User.dart';
import 'package:ydcflutter_app/redux/user_redux.dart';
///全局Redux store 的对象，保存State数据
class YDCState {
///用户信息
User user;
///构造方法
YDCState({this.user});
}
///创建 Reducer
///源码中 Reducer 是一个方法 typedef State Reducer<State>(State state, dynamic action);
///我们自定义了 appReducer 用于创建 store
YDCState appReducer(YDCState state, action) {
return YDCState(
///通过自定义 UserReducer 将 YDCState 内的 userInfo 和 action 关联在一起
user: UserReducer(state.user, action),
);
}
user_redux.dart code is as follows:
import 'package:redux/redux.dart';
import 'package:ydcflutter_app/test/bean/User.dart';
/**
* 用户相关Redux
*/
/// redux 的 combineReducers, 通过 TypedReducer 将 UpdateUserAction 与 reducers 关联起来
final UserReducer = combineReducers<User>([
TypedReducer<User, UpdateUserAction>(_updateLoaded),
]);
/// 如果有 UpdateUserAction 发起一个请求时
/// 就会调用到 _updateLoaded
/// _updateLoaded 这里接受一个新的userInfo，并返回
User _updateLoaded(User user, action) {
user = action.user;
return user;
}
///定一个 UpdateUserAction ，用于发起 userInfo 的的改变
///类名随你喜欢定义，只要通过上面TypedReducer绑定就好
class UpdateUserAction {
final User user;
UpdateUserAction(this.user);
}
6, create Store
(1) Store is the place to store data, you can see it as a container. The entire application can only have one Store.
(2) Store to receive a reducer, and initialize State, we want to use Redux manage global state, it is necessary to store application store in the entrance of the job. In the first open application initialization state once the application. So add an initialization function in the State.
/// 创建Store，引用 YDCState 中的 appReducer 创建 Reducer
/// initialState 初始化 State
final store = new Store<YDCState>(
appReducer,
initialState: new YDCState(
user: User(""),
));
7, into the top Store
flutter_redux provides a great widget, called StoreProvider, its usage is very simple, to receive a store, and child Widget.
All main source file:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:ydcflutter_app/login/LoginPage.dart';
import 'package:ydcflutter_app/common/test/CartModel.dart';
import 'package:ydcflutter_app/common/test/Item.dart';
import 'package:provider/provider.dart';
import 'package:ydcflutter_app/test/bean/YDCState.dart';
import 'package:ydcflutter_app/test/bean/User.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';
//
//void main() => runApp( ChangeNotifierProvider<CartModel>.value(
// value: new CartModel("格子衬衫"),
// child:new YDCApp()));
void main() => runApp( new YDCApp());
final ThemeData kIOSTheme = new ThemeData(
primarySwatch: Colors.orange,
primaryColor: Colors.grey[100],
primaryColorBrightness: Brightness.light,
);
final ThemeData kDefaultTheme = new ThemeData(
primarySwatch: Colors.purple,
accentColor: Colors.orangeAccent[400],
);
class YDCApp extends StatelessWidget {
/// 创建Store，引用 YDCState 中的 appReducer 创建 Reducer
/// initialState 初始化 State
final store = new Store<YDCState>(
appReducer,
initialState: new YDCState(
user: User(""),
));
YDCApp({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
/// 通过 StoreProvider Widget 应用 store
return new StoreProvider(
store: store,
child:new MaterialApp(
// title: '谈天说地',
// theme: defaultTargetPlatform == TargetPlatform.iOS
// ? kIOSTheme
// : kDefaultTheme,
theme: new ThemeData(
primarySwatch: Colors.blue,
primaryColor: Colors.grey[50],
scaffoldBackgroundColor: Colors.grey[50],
dialogBackgroundColor: Colors.grey[50],
primaryColorBrightness: Brightness.light,
buttonColor: Colors.blue,
iconTheme: new IconThemeData(
color: Colors.grey[700],
),
hintColor: Colors.grey[400],
),
title: '纸聊',
// supportedLocales: [
// const Locale('zh', 'CH'),
// const Locale('en', 'US'),
// ],
home: new LoginPage(),
));
}
}
8, get Store in the state in the sub-pages
Obtained by StoreConnector <S, ViewModel> store, S represents what kind of state we need to get from the store, ViewModel refers to the actual type when we use this State. At this time, when the state can monitor rebuilt Widget changes.
@override
Widget build(BuildContext context) {
///通过 StoreConnector 关联 YDCState 中的 User
return new StoreConnector<YDCState, User>(
///通过 converter 将 YDCState 中的 userInfo返回
converter: (store) => store.state.user,
///在 userInfo 中返回实际渲染的控件
builder: (context, userInfo) {
return new Scaffold( body:Center(
child: Builder(builder: (context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Builder(builder: (context) {
return Text("使用Redux更新数据: ${userInfo.name}");
}),
new Padding(
padding: const EdgeInsets.only(top: 15.0),
child:
StoreConnector<YDCState,VoidCallback>(
converter: (store) {
var newUserInfo=User("把用户名字更新为无用");
return () => store.dispatch(new UpdateUserAction(newUserInfo));
},
builder: (context, callback) {
return FloatingActionButton(
onPressed: callback,
child: Icon(Icons.add),
);
},
)
),
],
);
}),
),
);
},
);
}
9, using store.dispatch issue action
store.dispatch () is the only way the Action View emitted.
new Padding(
padding: const EdgeInsets.only(top: 15.0),
child:
StoreConnector<YDCState,VoidCallback>(
converter: (store) {
var newUserInfo=User("把用户名字更新为无用");
return () => store.dispatch(new UpdateUserAction(newUserInfo));
},
builder: (context, callback) {
return FloatingActionButton(
onPressed: callback,
child: Icon(Icons.add),
);
},
)
),
store.dispatch accepts an Action object as a parameter, and sends it out.
TestReduxPage all the code:
import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';
import 'package:ydcflutter_app/redux/user_redux.dart';
import 'package:ydcflutter_app/test/bean/User.dart';
import 'package:ydcflutter_app/test/bean/YDCState.dart';
class TestReduxPage extends StatefulWidget {
@override
State createState() => new _TestReduxPageState();
}
class _TestReduxPageState extends State<TestReduxPage> {
BuildContext mContext;
@override
void initState() {
// TODO: implement initState
super.initState();
}
@override
Widget build(BuildContext context) {
///通过 StoreConnector 关联 YDCState 中的 User
return new StoreConnector<YDCState, User>(
///通过 converter 将 YDCState 中的 userInfo返回
converter: (store) => store.state.user,
///在 userInfo 中返回实际渲染的控件
builder: (context, userInfo) {
return new Scaffold( body:Center(
child: Builder(builder: (context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Builder(builder: (context) {
return Text("使用Redux更新数据: ${userInfo.name}");
}),
new Padding(
padding: const EdgeInsets.only(top: 15.0),
child:
StoreConnector<YDCState,VoidCallback>(
converter: (store) {
var newUserInfo=User("把用户名字更新为无用");
return () => store.dispatch(new UpdateUserAction(newUserInfo));
},
builder: (context, callback) {
return FloatingActionButton(
onPressed: callback,
child: Icon(Icons.add),
);
},
)
),
],
);
}),
),
);
},
);
}
Widget dividerWidget = new Container(
//margin: const EdgeInsets.only( left: 10.0,right: 10.0),
child: new Padding(
padding: const EdgeInsets.only(left: 0.0, right: 0.0),
child:
new Divider(height: 1.0, indent: 0.0, color: Color(0xFFe5e5e5))
)
);
@override
void dispose() {
super.dispose();
}
}
The above can also StoreConnector <S, ViewModel> replaced using StoreBuilder acquire state data changes in the store and refresh the UI, but the same effect is to use more convenient
import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';
import 'package:ydcflutter_app/redux/user_redux.dart';
import 'package:ydcflutter_app/test/bean/User.dart';
import 'package:ydcflutter_app/test/bean/YDCState.dart';
class TestReduxPage extends StatefulWidget {
@override
State createState() => new _TestReduxPageState();
}
class _TestReduxPageState extends State<TestReduxPage> {
BuildContext mContext;
@override
void initState() {
// TODO: implement initState
super.initState();
}
@override
Widget build(BuildContext context) {
//使用 StoreBuilder 获取 store 中的state数据
return new StoreBuilder<YDCState>(
builder: (context, store) {
return new Scaffold(
body: Center(
child: Builder(builder: (context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Builder(builder: (context) {
return Text("使用Redux更新数据: ${store.state.user.name??"---"}");
}),
new Padding(
padding: const EdgeInsets.only(top: 15.0),
child:
new FloatingActionButton(
onPressed: (){
var newUserInfo=User("把用户名字更新为无用");
store.dispatch(new UpdateUserAction(newUserInfo));
},
child: Icon(Icons.add),
)
)
]
);
}))
);
});
}
Widget dividerWidget = new Container(
//margin: const EdgeInsets.only( left: 10.0,right: 10.0),
child: new Padding(
padding: const EdgeInsets.only(left: 0.0, right: 0.0),
child:
new Divider(height: 1.0, indent: 0.0, color: Color(0xFFe5e5e5))
)
);
@override
void dispose() {
super.dispose();
}
}
Flutter mall project combat: https://github.com/dechengyang/ydc_flutter_app
If it helps you, feel free to enjoy my milk money now, thank you!
Micro letter:
Alipay:
