Flutter Redux 小吃店

Posted 2023-02-23

【中文标题】Flutter Redux 小吃店

【英文标题】：Flutter Redux SnackBar

【发布时间】：2018-09-27 23:40:27

【问题描述】：

我在颤振代码中使用 redux。我有一个按钮，按下时会发送一个动作来调用异步 API（在我的中间件中）。我想要做的是当 api 调用执行并返回响应时，我想显示小吃栏，说明它已成功更新数据或错误消息。我的问题是如何通过调度一个动作来显示它。或者有没有更好的方法在 redux 中做到这一点？

【问题讨论】：

您可以将回调（完成和错误）作为中间件可以使用的操作的一部分传递

@aqwert 你能详细说明一下吗？我不明白这一点。另外，我的问题更多是关于如何在异步 api 响应后显示小吃栏。对于我可以使用 appState 的值，对吗？

添加了答案

【参考方案1】：

免责声明： 这不是在 IDE 中编写并运行的代码。它只是描述问题解决方案的一种方式。可能有错误。

假设您拥有 Redux 存储并使用异步进行 API 调用。

您的页面小部件：

... 

_onSubmit(Store<MyState> store) 
   store.dispatch(new SubmitAction(onCompleted: _onCompleted, onError: _onError))



_onCompleted() 
    Scaffold.of(context).showSnackBar(new SnackBar(
       content: new Text("Item Completed")));



_onError(error) 
    Scaffold.of(context).showSnackBar(new SnackBar(
       content: new Text("Error Occurred")));

你的 Redux 中间件：

apiMiddleware(Store<MyState> store, action, NextDispatcher next) 

    if(action is SubmitAction) 
        yourAPICall()
            .then((data) => action.onCompleted())
            .catchError((e) => action.onError(error));
    

    next(action);

MyAction 类：

typedef void VoidCallback();
typedef void ErrorCallback(error);
class MyAction 
   MyAction(this.onCompleted, this.onError)

   VoidCallback onCompeleted;
   ErrorCallback onError;

其中一些可以通过期货来完成，但这很简单。

【讨论】：

非常感谢。这种方法奏效了。我发现的另一种方法是使用全局键，并在中间件中使用此键在从 api 获得响应后显示小吃栏。

当然……不管怎样，你对中间件与 UI 的耦合程度感到满意

如果单击提交时我也发送加载操作怎么办。这将触发当前小部件被替换为新小部件，并显示进度条。回调将指向已销毁的上下文。回调是无状态小部件的安全机制吗？

取决于您传递的上下文。如果您停留在同一页面上，则可以传递页面上下文，而不是按钮的上下文。

但这对于 Redux 提出的架构是否可行？