Ошибки данных React + Flux вызывают уведомление о закусках?

Question

Как и в случае с this question, я использую материальный интерфейс и реактив, и я хочу отобразить уведомление о закусках при ошибке данных.

Значительная разница заключается в том, что я делаю это в довольно фонетическом пути, а не в Редуксе.

В частности, если операция fetch не может быть подключена к серверным серверам, я хочу отобразить уведомление о закусках, информирующее пользователя.

В моем понимании Flux пользовательский интерфейс излучает действия, которые влияют на магазины, в одностороннем порядке. Поскольку ошибка происходит в хранилище данных асинхронно, как я могу пузырить ошибку до закуски?

действие

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} /> 
) 
}