Flutter redux thunk 动作参数答案

【问题标题】：Flutter redux thunk action parametersFlutter redux thunk 动作参数
【发布时间】：2019-01-08 17:54:14
【问题描述】：

我正在尝试使用 redux_thunk 但我从演示中真正不明白的是如何向该函数发送参数。我有一个文件 actions.dart 在哪里拥有所有的行动。从我的组件中，我想向该操作分派一些参数，以便我向 API 发出请求。例如，我想使用用户名、密码登录而不将它们保存在状态

   actions.dart    
final ThunkAction<AppState> login = (Store<AppState> store) async {
          await new Future.delayed(
            new Duration(seconds: 3),
                () => "Waiting complete",
          );
          store.dispatch(OtherAction(....));
        };

    component.dart
class LoginBtn extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            return StoreConnector<AppState, Function>(
                converter: (store) => (){
                  login(store);
                },
                builder: (context, callback) {
                  return RaisedButton(
                      highlightElevation: 20.0,
                      child: Text('Login', style: TextStyle(color: Colors.white)),
                      color: Color(0xFF0f7186),
                      onPressed: () {
                        callback();
                      });
                });
          }
        }

谁能帮我做一些快速修复或演示。谢谢！

这样的？

class MyAction {
  String gender;

  MyAction(
      {this.gender});

  ThunkAction<AppState> getDate() {
    return (Store<AppState> store) async {...};
  }
}

【问题讨论】：

也许这个答案会帮助其他人stackoverflow.com/a/64533014/3808307

标签： redux flutter

【解决方案1】：

我认为最简单的方法是使用函数来创建动作：

ThunkAction<String> waitAndDispatch(int secondsToWait) {
   return (Store<String> store) async {
     final searchResults = await new Future.delayed(
       new Duration(seconds: secondsToWait),
       () => "Search Results",
     );

     store.dispatch(searchResults);
   };
 }

然后，像这样发送它：

store.dispatch(waitAndDispatch(3));

【讨论】：

【解决方案2】：

有两种方法可以做到这一点。其中两个将您将要分派的动作包装在一个类中，就像您在上面所做的那样。

class MyAction {
  String gender;
  String name;
  MyAction(this.gender, this.name);

  void getDate<AppState>(Store<AppState> store) {
    print("store is $store, gender is $gender, name is $name");
  }
}

1。创建另一个中间件或修改当前的中间件。调用 getDate() 从中间件内。例如。

// this middleware intercepts any MyAction
void myMiddleware<AppState>(
  Store<AppState> store,
  dynamic action,
  NextDispatcher next
) {
  if (action is MyAction) {
    action.getDate(store);
  } else {
    next(action);
  }
}

然后我们就这样调度：

store.dispatch(new MyAction("m", "Peterson")) ;

2。我们没有修改或创建另一个中间件，而是让 getDate() 成为 ThunkAction 并在调度前调用 getDate()。例如。

class MyAction {
  String gender;
  String name;
  MyAction(this.gender, this.name);

  ThunkAction<AppState> getDate = (Store<AppState> store) {
    print("store is $store, gender is $gender, name is $name");
  }
}

然后我们像这样调度它：

store.dispatch(new MyAction(...).getDate)

第二种方法，也就是您在上面的示例中使用的方法，我将如何去做，因为我不必干预中间件。

【讨论】：

当使用方法 2) 我得到“只有静态成员可以在初始化程序中访问”

【解决方案3】：

对于这个功能，你应该根据官方文档扩展CallableThunkAction<State>：

可由最终用户实现以创建基于类的 [ThunkAction] 的接口。

示例

class SigninAction extends CallableThunkAction<AuthState> {
  SigninAction(this.mobile);

  final String mobile;

  @override
  call(Store<AuthState> store) async {
    // call to server endpoint
    store.dispatch(results);
  }
}

然后，像这样发送它：

store.dispatch(SigninAction('mobile number'));

【讨论】：