Trigger trigger notification / callback after phleg action

Question

Recently, I used reflux in my project, and this question puzzled me a lot.
As a reflux pattern, I call actions in my React components and retrieve deleted data in the reflux store that listens for actions. And my components are listening to data changes in the store. For example, get a list of items. So far this is wonderful.
But sometimes I need a notification that can tell me that the action was successful.
For example, I have UserStore, UserActions, and LoginComponent that listen on UserStore. when users enter their username and password and press the submit button, LoginComponent calls UserActions.login (), and I send a request to enter the UserStore. When the login is completed successfully, the UserStore receives the user information from the response.
At this time, I want to give a hint in LoginComponent, for example, "Login Success". I have two ways to do this, but I do not think this is good enough.

• Set a flag in the UserStore data and then initiate the change. LoginComponent receives this flag when the UserStore fires a data change event, and then requests it. Since UserStore will lead to data changes not only as a result of a successful login, but also in some other situations, such as collecting user information from cookies or sessionStorage, LoginComponent should add an if-else for this login success flag, if successful at the entrance to the system. <sh> I do not think this is a good template, because the flag is intended only for help and NOT real data, such as user information. And if I also need a request after changing the user password, I will need another flag field.
• ( ) UserAction , LoginComponent . , , -, , , Unipirectional ?

: / ?

. stackoverflow.com. , . , , , , , , . !

Answer 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());
    }
  }
}

Hide result

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;

Hide result