【问题标题】:Trigger Notification/Callback after reflux action execution回流动作执行后触发通知/回调
【发布时间】:2016-03-18 20:58:26
【问题描述】:

我最近在我的项目中使用了回流,这是一个让我很困惑的问题。
作为回流模式,我在我的 React 组件中调用操作,并在我的回流存储中获取正在监听操作的远程数据。我的组件会监听存储中数据的变化。例如获取项目列表。到目前为止还不错。
但有时,我想要一个通知,告诉我该操作已成功执行。
例如,我有一个 UserStore、一个 UserActions 和一个 LoginComponent 来监听 UserStore。当用户输入用户名和密码并单击提交按钮时,LoginComponent 调用 UserActions.login(),然后我在 UserStore 中发送登录请求。登录成功后,UserStore 从响应中获取用户信息。
这一次,我想在 LoginComponent 中给出一个提示,例如“登录成功”。我有两种方法可以做到,但我认为任何一种都不够好。

  1. 在 UserStore 的数据中给出一个标志,然后触发更改。当 UserStore 触发数据更改事件时,LoginComponent 获取该标志,然后进行提示。因为 UserStore 不仅会在登录成功时触发数据更改,还会在其他一些情况下(例如从 cookie 或 sessionStorage 获取用户信息)触发数据更改,因此 LoginComponent 必须为此登录成功标志添加 if-else,如果登录成功则提示。 我认为这不是一个好的模式,因为该标志仅用于提示,而不是像用户信息这样的真实数据。如果我还想在用户更改密码后提示,我将需要另一个标志字段。
  2. 给UserAction调用传递一个promise(或回调函数),登录成功后解决这个promise,然后LoginComponent可以在promise.then中提示。看起来比第一个好,但不是有点反模式,因为通过动作传递给商店的承诺可能会破坏 单向 回流?

我想问的是:解决这个问题的常用/合适的方法是什么?

我不是来自英语地区,不擅长英语表达。这是我在 stackoverflow.com 上的第一个问题。我不太确定我是否清楚地描述了我的问题。因此,如果您对这个问题有什么建议,请告诉我,我会改进它以帮助其他关心这个问题的人。非常感谢!

【问题讨论】:

  • 我觉得你们这两种态度都没有问题。它不会破坏通量的单向概念,因为当视图更改时,它会触发 store 监听的动作。商店进行更改,然后使用触发器更新视图。我和你有同样的困境,虽然不是在异步调用上。您可以在我的博文dimagimburg.com/… 中阅读
  • @DimaGimburg 谢谢!也许是我太担心了。

标签: javascript reactjs refluxjs


【解决方案1】:

您可以在触发器中包含参数。

export default class AppCtrl extends AppCtrlRender {
  constructor() {
    super();
    this.state = getState();
  }

  componentDidMount = () => { this.unsubscribe = BasicStore.listen(this.storeDidChange); }
  componentWillUnmount = () => { this.unsubscribe(); }
  storeDidChange = (id) => {
    switch (id) {
      case 'data1': this.setState({Data1: BasicStore.getData1()}); break;
      case 'data2': this.setState({Data2: BasicStore.getData2()}); break;
      case 'data3': this.setState({Data3: BasicStore.getData3()}); break;
      default: this.setState(getState());
    }
  }
}

import Reflux from 'reflux';

import Actions from '../actions/sa.Actions';
import AddonStore from './Addon.Store';
import MixinStoreObject from './Mixin.Store';

function _GotData(data) { this.data1 = data; BasicStore.trigger('data1'); }

let BasicStoreObject = {
  init() { this.listenTo(AddonStore, this.onAddonTrigger); },
  data1: {},
  listenables: Actions,
  mixins: [MixinStoreObject],
  onGotData1: _GotData,
  onAddonTrigger() { BasicStore.trigger('data2'); },
  getData1() { return this.data1; },
  getData2() { return AddonStore.data2; },
  getData3() { return this.data3; }
}
const BasicStore = Reflux.createStore(BasicStoreObject);
export default BasicStore;

【讨论】:

  • 我对@9​​87654323@ 的事情有点困惑。我在想商店是由组件监听的,所有数据都应该(仅)由trigger 传输。那么使用BasicStore.getData1() 之类的函数直接从存储中获取数据是不是有点“反模式”?
  • 在具有许多数据元素的复杂应用程序中,将自己限制为触发器返回的数据是不切实际的。而在一个简单的应用程序中它可能会起作用。 Reflux 提供了使用最适合您需求的方法的灵活性。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-05-17
  • 2015-09-11
  • 2018-09-22
  • 2015-12-24
  • 2010-11-22
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多