React+Flux数据错误会产生小吃条通知

React + Flux data errors produce snackbar notification?

本文关键字：通知 数据 错误 误会 React+Flux      更新时间：2023-09-26

类似于这个问题，我使用的是material UI和React，我想在数据错误时显示Snackbar通知。

显著的区别是，我是用一种相当普通的Flux方式来做这件事的，而不是Redux

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

在我对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} />
  )
}

类似的东西

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}  />
  )
}
相关文章：