store的作用主要是對(duì)全局狀態(tài)進(jìn)行管理装畅，但并不是每個(gè)組件或者頁(yè)面都要使用它概疆，只有真正使用到這個(gè)全局狀態(tài)時(shí)梳码，組件或者頁(yè)面的state去implements就可以了板惑。
創(chuàng)建Store
在lib下創(chuàng)建一個(gè)store的包必搞，然后枫攀，我們拿app主題色為例：
這里括饶，我們不是去寫(xiě)一個(gè)組件或者是一個(gè)頁(yè)面，而是單純的對(duì)狀態(tài)進(jìn)行管理来涨，所以不需要專門(mén)使用插件進(jìn)行生成图焰。當(dāng)然也可以插件生成，然后手動(dòng)修改蹦掐，看個(gè)人需要技羔。
第一步僵闯，需要?jiǎng)?chuàng)建一個(gè)全局state，這個(gè)state中只有一個(gè)themeColor的屬性（也可以多個(gè)藤滥，比如字體顏色鳖粟、大小等）。--store/store.dart
import 'dart:ui';
import 'package:fish_redux/fish_redux.dart';
abstract class GlobalBaseState{
Color get themeColor;
set themeColor(Color color);
}
class GlobalState implements GlobalBaseState, Cloneable<GlobalState>{
@override
Color themeColor;
@override
GlobalState clone() {
return GlobalState();
}
}
這里我們創(chuàng)建了一個(gè)全局的狀態(tài)--GlobalState超陆，它是在抽象GlobalBaseState基礎(chǔ)上創(chuàng)建的牺弹。
第二步，我們來(lái)創(chuàng)建管理這個(gè)全局狀態(tài)的意圖Action及針對(duì)這個(gè)意圖的處理reducer时呀。
--store/action.dart & store/reducer.dart
Action:
import 'package:fish_redux/fish_redux.dart';
enum GlobalAction { changeThemeColor }
class GlobalActionCreator{
static Action onChangeThemeColor(){
return const Action(GlobalAction.changeThemeColor);
}
}
定義這個(gè)意圖名：changeThemeColor
然后處理reducer：
import 'package:fish_redux/fish_redux.dart';
import 'dart:ui';
import 'package:flutter/material.dart' hide Action;
import 'action.dart';
import 'state.dart';
Reducer<GlobalState> buildReducer(){
return asReducer(
<Object, Reducer<GlobalState>>{
GlobalAction.changeThemeColor: _onChangeThemeColor,
},
);
}
GlobalState _onChangeThemeColor(GlobalState state, Action action){
final Color color = state.themeColor == Colors.green ? Colors.blue : Colors.green;
return state.clone()..themeColor = color;
}
意圖--Action changeThemeColor的具體處理實(shí)現(xiàn)：_onChangeThemeColor张漂，切換主題色。
第三步我們就可以創(chuàng)建store谨娜。--store/store.dart
import 'package:fish_redux/fish_redux.dart';
import 'state.dart';
import 'reducer.dart';
class GlobalStore{
static Store<GlobalState> _globalStore;
static Store<GlobalState> get store =>
_globalStore ??= createStore<GlobalState>(GlobalState(), buildReducer());
}
GlobalStore創(chuàng)建需要GlobalState及reducer航攒。
使用GlobalStore
首先，我們需要在入口處加一個(gè)頁(yè)面的判斷趴梢，判斷頁(yè)面的state有沒(méi)有implements 全局的state漠畜，即：implements GlobalBaseState
import 'package:fish_demo/list/page.dart';
import 'package:fish_demo/splash/page.dart';
import 'package:fish_demo/store/state.dart';
import 'package:fish_demo/store/store.dart';
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import 'entrance/page.dart';
import 'grid/page.dart';
Widget createApp(){
final AbstractRoutes routes = PageRoutes(
pages:<String,Page<Object,dynamic>>{
'splash_page':SplashPage(),
'entrance_page':EntrancePage(),
'grid_page':GridPage(),
'list_page':ListPage(),
} ,
//重點(diǎn)-----
visitor: (String path,Page<Object, dynamic> page){
if(page.isTypeof<GlobalBaseState>()){
page.connectExtraStore<GlobalState>(GlobalStore.store, (Object pageState,GlobalState appState){
final GlobalBaseState p = pageState;
if(p.themeColor !=appState.themeColor){
if(pageState is Cloneable){
final Object copy = pageState.clone();
final GlobalBaseState newState = copy;
newState.themeColor = appState.themeColor;
return newState;
}
}
return pageState;
});
}
},
);
然后，page中的使用就跟fish redux一樣了坞靶，我們?cè)谟|發(fā)處dispatch這個(gè)page下聲明的相關(guān)意圖給到effect憔狞，在effect中直接使用GlobalStore.store.dispatch給到全局狀態(tài)的處理reducer進(jìn)行處理。
當(dāng)前page下action中聲明彰阴，view組件中觸發(fā)：
import 'package:fish_redux/fish_redux.dart';
//TODO replace with your own action
enum ItemAction { changeThemeColor }
static Action changeThemeColor(){
return const Action(ItemAction.changeThemeColor);
}
}
......
view中觸發(fā)：
onTap: (){
dispatch(ItemActionCreator.changeThemeColor());
},
當(dāng)前page下effect中直接處理：
import 'package:fish_demo/store/action.dart';
import 'package:fish_demo/store/store.dart';
import 'package:fish_redux/fish_redux.dart';
import 'action.dart';
import 'state.dart';
Effect<ItemState> buildEffect() {
return combineEffects(<Object, Effect<ItemState>>{
ItemAction.changeThemeColor: _onChangeThemeColor,
});
}
void _onChangeThemeColor(Action action,Context<ItemState> ctx){
//發(fā)送改變?nèi)譅顟B(tài)意圖：
GlobalStore.store.dispatch(GlobalActionCreator.onChangeThemeColor());
}
這時(shí)瘾敢，全局狀態(tài)的reducer接收到GlobalAction.changeThemeColor就開(kāi)始進(jìn)行全局狀態(tài)處理。即：調(diào)用 _onChangeThemeColor尿这。store/reducer.dart
GlobalState _onChangeThemeColor(GlobalState state, Action action){
final Color color = state.themeColor == Colors.green ? Colors.blue : Colors.green;
return state.clone()..themeColor = color;
}
具體實(shí)現(xiàn)可參考對(duì)應(yīng)demo:https://gitee.com/lagman/fish_redux_demo
