[Question] Example of how to handle create/update errors?

[marbemac]

Hi there, I'm new to flux and am trying to figure out how to handle errors. Any chance you could update the Todo or Chat Marty examples to handle errors on create/update? There are plenty of example of how to use the .fetch and .when APIs to handle GET errors, but I can't find a good example of how to handle errors on POST/PUT/DELETE.

Below is how I'm doing it right now for my Session store (authenticates the user). There's a lot of extra wiring involved, and it doesn't feel right to me. I've included a bunch of code, but if you could point me to an example of how to do it right I'll continue on my way :).

---

Starts in the login component. Here I setup a state mixin to listen to the error in the SessionStore. Should I be storing the error in the store? I call SessionSourceActionCreators.createFailed(res) from session-http-api.js, does that make sense?

login.js

require("./login.styl");

var React = require('react'),
    Marty = require('marty'),
    SessionActionCreators = require('../actions/session-action-creators.js'),
    SessionStore = require('../stores/session-store.js');

var LoginState = Marty.createStateMixin({
  listenTo: SessionStore,
  getState: function () {
    return {
      error: SessionStore.getError()
    };
  }
});

var Login = React.createClass({
  mixins: [LoginState],

  handleSubmit(event) {
    event.preventDefault();
    var identifier = this.refs.identifier.getDOMNode().value;
    var pass = this.refs.pass.getDOMNode().value;

    SessionActionCreators.createSession(identifier, pass);
  },

  render() {
    var errors = this.state.error ? <p>Bad login information</p> : '';
    return (
      <form onSubmit={this.handleSubmit} className='slLogin'>
        {errors}
        <input ref="identifier" placeholder="Email" type="email"/>
        <input ref="pass" placeholder="Password" type="password"/>
        <button type="submit">Login</button>
      </form>
    );
  }
});

module.exports = Login;

session-constants.js

var Marty = require('marty');

module.exports = Marty.createConstants([
  'CREATE_SESSION',
  'CREATE_SESSION_FAILED'
]);

session-source-action-creators.js

var Marty = require('marty'),
    SessionConstants = require('../constants/session-constants.js');

module.exports = Marty.createActionCreators({
  createSession: SessionConstants.CREATE_SESSION(),
  createFailed: SessionConstants.CREATE_SESSION_FAILED()
});

session-http-api.js

var Marty = require('marty'),
    SessionSourceActionCreators = require('../actions/session-source-action-creators.js');

module.exports = Marty.createStateSource({
  type: 'http',
  createSession: function (identifier, pass) {
    var req = {
      body: {
        "email": identifier,
        "password": pass
      },
      url: 'http://localhost:3005/sessions'
    };

    return this.post(req).then(function (res) {
      SessionSourceActionCreators.createSession(res.body.data);
    }, function (res) {
      SessionSourceActionCreators.createFailed(res);
    });
  }
});

session-action-creators.js

var Marty = require('marty'),
    SessionHttpApi = require('../sources/session-http-api.js')
    SessionConstants = require('../constants/session-constants.js');

module.exports = Marty.createActionCreators({
  createSession: SessionConstants.CREATE_SESSION(function (identifier, password) {
    this.dispatch(null);
    return SessionHttpApi.createSession(identifier, password);
  })
});

session-store.js

var Marty = require('marty'),
    Immutable = require('immutable'),
    SessionConstants = require('../constants/session-constants.js'),
    SessionLocalApi = require('../sources/session-local-api.js');

var SessionRecord = Immutable.Record({
  id: null,
  token: null,
  name: null
});

var SessionStore = Marty.createStore({
  displayName: 'Session',
  handlers: {
    create: SessionConstants.CREATE_SESSION,
    createFailed: SessionConstants.CREATE_SESSION_FAILED
  },
  getInitialState() {
    var session = SessionLocalApi.getSession();
    return Immutable.Map({
      error: null,
      session: new SessionRecord(session)
    });
  },
  getSession() {
    return this.state.get('session');
  },
  getError() {
    return this.state.get('error');
  },
  create(session) {
    this.state = this.state.merge({'error': false, 'session': new SessionRecord(session)});
  },
  createFailed(error) {
    this.state = this.state.set('error', true);
  }
});

module.exports = SessionStore;

[marbemac]

Just saw that this is basically a dup of martyjs/marty-chat-example#3. Feel free to close if discussion should happen over there.

[jhollingworth]

Hey, sorry for late reply. I'm working on some examples for dealing with errors. In the mean time your example makes complete sense, we do something similar right now in a project I work on

[adjohu]

any news on this?