fish_redux使用详解---看完就会用! (11)

这地方,仅仅让CountState多实现了GlobalBaseState类,很小的改动

class CountState implements Cloneable<CountState>,GlobalBaseState { int count; @override CountState clone() { return CountState()..count = count; } @override Color themeColor; } CountState initState(Map<String, dynamic> args) { return CountState()..count = 0; }

view

这里面仅仅改动了一行,在AppBar里面加了backgroundColor,然后使用state里面的全局主题色

Widget buildView(CountState state, Dispatch dispatch, ViewService viewService) { return _bodyWidget(state, dispatch); } Widget _bodyWidget(CountState state, Dispatch dispatch) { return Scaffold( appBar: AppBar( title: Text("FishRedux"), ///全局主题,仅仅在此处改动了一行 backgroundColor: state.themeColor, ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('You have pushed the button this many times:'), Text(state.count.toString()), ], ), ), floatingActionButton: FloatingActionButton( onPressed: () { ///点击事件,调用action 计数自增方法 dispatch(CountActionCreator.updateCount()); }, child: Icon(Icons.add), ), ); }

如果其他模块也需要做主题色,也按照此处逻辑改动即可

调用

调用状态更新就非常简单了,和正常模块更新View一样,这里我们调用全局的就行了,一行代码搞定,在需要的地方调用就OK了

GlobalStore.store.dispatch(GlobalActionCreator.onChangeThemeColor()); 搞定

经过上面的的三步,我们就可以使用全局状态了;从上面子模块的使用,可以很明显的感受到,全局状态,必须前期做好字段的规划,确定之后,最好不要再增加字段,不然继承抽象类的多个模块都会爆红,提示去实现xxx变量

全局模块优化 反思

在上面的全局模式里说了,使用全局模块,前期需要规划好字段,不然项目进行到中期的时候,想添加字段,多个模块的State会出现大范围爆红,提示去实现你添加的字段;项目开始规划好所有的字段,显然这需要全面的考虑好大部分场景,但是人的灵感总是无限的,不改代码是不可能,这辈子都不可能。只能想办法看能不能添加一次字段后,后期添加字段,并不会引起其他模块爆红,试了多次,成功的使用中间实体,来解决该问题

这里优化俩个方面

使用通用的全局实体

这样后期添加字段,就不会影响其他模块,这样我们就能一个个模块的去整改,不会出现整个项目不能运行的情况

将路由模块和全局模块封装

路由模块后期页面多了,代码会很多,放在主入口,真的不好管理;全局模块同理

因为使用中间实体,有一些地方会出现空指针问题,我都在流程里面写清楚了,大家可以把优化流程完整看一遍哈,都配置好,后面拓展使用就不会报空指针了

优化 入口模块

main:大改

从下面代码可以看到,这里将路由模块和全局模块单独提出来了,这地方为了方便观看,就写在一个文件里;说明下,RouteConfig和StoreConfig这俩个类,可以放在俩个不同的文件里,这样管理路由和全局字段更新就会很方便了!

RouteConfig:这里将页面标识和页面映射分开写,这样我们跳转页面的时候,就可以直接引用RouteConfig里面的页面标识

StoreConfig:全局模块里最重要的就是状态的判断,注释写的很清楚了,可以看看注释哈

void main() { runApp(createApp()); } Widget createApp() { return MaterialApp( title: 'FishRedux', home: RouteConfig.routes.buildPage(RouteConfig.guidePage, null), //作为默认页面 onGenerateRoute: (RouteSettings settings) { //ios页面切换风格 return CupertinoPageRoute(builder: (BuildContext context) { return RouteConfig.routes.buildPage(settings.name, settings.arguments); }); }, ); } ///路由管理 class RouteConfig { ///定义你的路由名称比如 static final String routeHome = 'page/home'; ///导航页面 static const String guidePage = 'page/guide'; ///计数器页面 static const String countPage = 'page/count'; ///页面传值跳转模块演示 static const String firstPage = 'page/first'; static const String secondPage = 'page/second'; ///列表模块演示 static const String listPage = 'page/list'; static const String listEditPage = 'page/listEdit'; static final AbstractRoutes routes = PageRoutes( pages: <String, Page<Object, dynamic>>{ ///将你的路由名称和页面映射在一起,比如:RouteConfig.homePage : HomePage(), RouteConfig.guidePage: GuidePage(), RouteConfig.countPage: CountPage(), RouteConfig.firstPage: FirstPage(), RouteConfig.secondPage: SecondPage(), RouteConfig.listPage: ListPage(), RouteConfig.listEditPage: ListEditPage(), }, visitor: StoreConfig.visitor, ); } ///全局模式 class StoreConfig { ///全局状态管理 static _updateState() { return (Object pageState, GlobalState appState) { final GlobalBaseState p = pageState; if (pageState is Cloneable) { final Object copy = pageState.clone(); final GlobalBaseState newState = copy; if (p.store == null) { ///这地方的判断是必须的,判断第一次store对象是否为空 newState.store = appState.store; } else { /// 这地方增加字段判断,是否需要更新 if ((p.store.themeColor != appState.store.themeColor)) { newState.store.themeColor = appState.store.themeColor; } /// 如果增加字段,同理上面的判断然后赋值... } /// 返回新的 state 并将数据设置到 ui return newState; } return pageState; }; } static visitor(String path, Page<Object, dynamic> page) { if (page.isTypeof<GlobalBaseState>()) { ///建立AppStore驱动PageStore的单向数据连接 ///参数1 AppStore 参数2 当AppStore.state变化时,PageStore.state该如何变化 page.connectExtraStore<GlobalState>(GlobalStore.store, _updateState()); } } } Store模块

下面俩个模块是需要改动代码的模块

state

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsxfxz.html