Flutter fish_redux

准备工作

FishReduxTemplate 这个是android studio 上的插件,如果不用插件,写一个平常的页面需要

• action.dart 事件转发动作类
• effect.dart 网络请求等,会有些耗时操作
• page.dart 做一些配置工作
• reducer.dart 简单的需要改变页面的操作
• state.dart 数据管理类

• view.dart 视图类

  
  自己画的.png

如果你没用过这个框架,想用~ 在网上找了一圈指南指北发现还是不会用, 那你可以尝试跟我的节奏来, 我们先学会用, 原理后面再说~

项目引入地址

• GitHub地址：https://github.com/alibaba/fish-redux
• Pub地址：https://pub.dev/packages/fish_redux

用起来

第一步

image.png

通过FishReduxTemplate插件生成一个page， 这样就可以自动创建出多个文件了.
按照刚才介绍的几个类 我们来写这个入门Demo
view.dart

Widget buildView(DsmState state, Dispatch dispatch, ViewService viewService) {

  return Scaffold(
    backgroundColor: Colors.grey,
    appBar: AppBar(title: Text("测试组件")),
    body: Container(
      child: Column(
        children: [
          TextFormField(
            autofocus: false,
            keyboardType: TextInputType.emailAddress,
            decoration: InputDecoration(
              contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              hintText: '用户名',
              border: OutlineInputBorder(borderRadius: BorderRadius.circular(32)),
            ),
          ),
          TextFormField(
            autofocus: false,
            keyboardType: TextInputType.emailAddress,
            decoration: InputDecoration(
              contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              hintText: '密码',
              border: OutlineInputBorder(borderRadius: BorderRadius.circular(32)),
            ),
          ),
          FlatButton(
            onPressed: () => dispatch.call(DsmActionCreator.onLogin()),
            child: Text(state.isLogin ? "已登录" : "点击请求"),
          )
        ],
      ),
    ),
  );
}

FlatButton(
onPressed: () => dispatch.call(DsmActionCreator.onLogin()),
child: Text(state.isLogin ? "已登录" : "点击请求"),
)
点击时使用dispatch分发一个action! 既然有分发就有接收

接收类可以用Reducer 也可以用Effect, 这里模拟点击请求按钮后等待两秒

Effect.dart

Effect<DsmState> buildEffect() {
  return combineEffects(<Object, Effect<DsmState>>{
    DsmAction.requestLogin: _onAction, //这里有一个映射关系
  });
}

void _onAction(Action action, Context<DsmState> ctx) {
  Future.delayed(Duration(seconds: 2)).then((value) {
    //两秒钟后分发一个响应Action
    ctx.dispatch(DsmActionCreator.onResponseLogin());
  });
}

Reducer.dart

Reducer<DsmState> buildReducer() {
  return asReducer(
    <Object, Reducer<DsmState>>{
      DsmAction.responseLogin: _onAction,
    },
  );
}

DsmState _onAction(DsmState state, Action action) {
  final DsmState newState = state.clone();
  newState.isLogin = true;
  return newState;
}

改变login数据,这是一个新state

state.dart

class DsmState implements Cloneable<DsmState> {
  bool isLogin = false;

  @override
  DsmState clone() {
    return DsmState()
      ..isLogin = isLogin;
  }
}

DsmState initState(Map<String, dynamic> args) {
  return DsmState();
}

state数据更改后会刷新view.