Swap promises for ES6 generators and ES7 async await

[tomatau]

I feel this would greatly improve the API usage and also improve error handling - making the code much clear to avoid things like the dirty reThrow function that lives inside Action.

This would require using the babel compiler (6to5) which also supports JSX if mcfly ever goes the route of involving any JSX.

e.g. Currently:

let MyActions = mcfly.createActions({
  actionCreator(foo){
    let scopedVar;
    return asyncCall.method(foo)
      .then(resolved=>{
        scopedVar = resolved.bar;
        return asyncCall.anotherMethod(resolved.derp);
      })
      .then(resolved2=>({
        actionType: Constants.EVENT,
        scopedVar, resolved2
      }))
  }

Would become, something like this (maybe?):

let MyActions = mcfly.createActions({
  actionCreator(foo){
    let resolved = await asyncCall.method(foo)
    let scopedVar = resolved.bar;
    let resolved2 = await asyncCall.anotherMethod(resolved.derp)
    return {
      actionType: Constants.EVENT,
      scopedVar, resolved2
    }
  }
}

Which reads much nicer imo and is forward thinking.

It would also help with #36

[kenwheeler]

That api would require end users to use babel though, correct?

[tomatau]

We would just need to use babel in the build process I think? I'm not sure how well it would play with people using McFly in their browserify/webpack/POJ workflow.

[kenwheeler]

What do you think about somehow exposing an async prop on an action creator that will allow users to explicitly dispatch?

[tomatau]

Pseudo code an example?

[kenwheeler]

MyActions.getPost.async(function(dispatch){

       dispatch({
            actionType: 'GET_POST_BEGIN',
            loading: true
        });

        $.ajax('/foo/bar/')
        .done(function(data){
             dispatch({
                 actionType: 'GET_POST_SUCCESS',
                 data: data,
                 loading: false
             });
        })
        .fail(function(error){
            dispatch({
                 actionType: 'GET_POST_ERROR',
                 error: error,
                 loading: false
             });
        });

});

[kenwheeler]

With the above example, MyActions.getPost(param) would still work, async being a special property that doesn't call dispatch implicitly.

[tomatau]

Have been using async await in action creators anyway and it works nicely

[kenwheeler]

Can I see how you're doing that?

[tomatau]

Just compiling with babel, runtime and experimental set, here's an example I've just poached and simplified from our src:

let ItemActions = flux.createActions({
  async createItem(item){
    try {
      let { id, parentId } = item
        , newItem = await itemGateway.createItem(item)
        , page = await fetchPage(id, parentId, ItemsStore.getPage())
        , selectedItem = await selectItem(newItem);
      return {
        actionType : ItemConstants.CREATE_ITEM,
        item : newItem,
        items : page.items,
        page : page.page,
        selectedItem : selectedItem.item,
      }
    } catch(e) {
      return {
        actionType: AppConstants.NOOP
      }
    }
  },

[kenwheeler]

Holy shit, that's phenomenal

[tomatau]

This all works as we wrap action creators in promises :)

Tempted to enable babel playground too.. would allow working with memo functions, and static properties for React 0.13 class propTypes and defaults. Lots of goodies!