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

  • 在UserStore的数据中提供一个标志,然后触发更改。当UserStore触发数据更改事件然后提示时,LoginComponent将获得此标志。因为UserStore不仅会在登录成功时触发数据更改,而且还会在某些其他情况下(例如从cookie或sessionStorage获取用户信息)触发数据更改,所以LoginComponent必须为该登录成功标志添加if-else,如果是登录成功则提示。
    我认为这不是一个好的模式,因为该标志仅用于提示,而不是诸如用户信息之类的真实数据。如果在用户更改密码后也想提示我,我将需要另一个标志字段。
  • 将一个promise(或回调函数)传递给UserAction调用,并在登录成功后解析此promise,然后LoginComponent可以在promise.then中提示。它似乎比第一个更好,但是它不是有点反模式,因为通过 Action 传递给商店的 promise 可能会破坏双向回流吗?

  • 我想问的是:解决此问题的常用/适当方法是什么?

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

    最佳答案

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

    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;

    关于javascript - 执行回流操作后触发通知/回调,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34249078/

    10-13 04:32