React + Flux 数据错误产生 snackbar 通知？

Question

与类似，我正在使用 material UI 和 React，我想在数据错误时显示 Snackbar 通知。

显着的区别是我以相当普通的 Flux 方式而不是 Redux 来做这件事。

具体来说，如果 fetch 操作无法连接到后端服务器，我想显示一个通知用户的 snackbar 通知。

根据我对 Flux 的理解，UI 以单向方式发出影响商店的动作。由于错误是在数据存储中异步发生的，我该如何将错误冒泡到 snackbar？

动作

export default {
  loginUser: () => {
    AppDispatcher.dispatch({ actionType: LOGIN });
  }
}

商店

class LoginStore extends EventEmitter {
  constructor() {
    super()
    this.snackbarError = undefined
  }
  _registerToActions(action) {
    switch(action.actionType) {
      case LOGIN:
        fetch('/auth').catch((error) => {
          this.snackbarError = 'Auth failed!'
        })
        this.emitChange();
        break;
      }
    }
  }
}

分量

class MyComponent extends React.Component {

  // how do I trigger snackbar.show() when LoginStore.snackbarError set?

  render (
    <h3>My Component</h3>
    <button onClick={LoginAction.loginUser}>Login</button>
    <Snackbar message={LoginStore.snackbarError} />
  )
}

Answer 1

像这样

class LoginStore extends EventEmitter {
  constructor() {
    super()
    this.snackbarError = undefined
  }
  _registerToActions(action) {
    switch(action.actionType) {
      case LOGIN:
        fetch('/auth').catch((error) => {
          this.snackbarError = 'Auth failed!'
          this.emitSomeWhoCallMyComponent();
        })

        break;
      }
    }
  }
}

和

class MyComponent extends React.Component {

  // how do I trigger snackbar.show() when LoginStore.snackbarError set?
  componentDidMount()
  {
    this._doSomething = () => doSomething();
    LoginStore.addSomeWhoCallMyComponentListener(this._doSomething);
  }

  doSomething()
  {
    snackbar.show();
  }
  render (
    <h3>My Component</h3>
    <button onClick={LoginAction.loginUser}>Login</button>
    <Snackbar message={LoginStore.snackbarError}  />
  )
}

React + Flux 数据错误产生 snackbar 通知？

React + Flux data errors produce snackbar notification?

javascript

flux

reactjs