Make sure ActionCreators will work with es6 arrow syntax. Fixes #83

[therealcisse]

💄

In some es6 transpilers, ES6 arrow functions are bound to the current scope making it impossible to call this.dispatch(...) or other methods of the ActionCreators inside the callback.

By passing context as the last argument to the ActionCreator, one can use context.dispatch(...) or other methods of the ActionCreator.

Since context is passed as the last argument, all existing code work as is and if you don't use es6 arrow syntax, you're not affected.

[therealcisse]

Fixes #83

[jhollingworth]

Damn, I knew messing with the function context would come back to bite me!

Arrow operators are technically not necessary however I understand that people are going to use them for syntactic sugar. The only function that is actually unique is dispatch so can we just pass that in instead?

var UserActionCreators = Marty.createActionCreators({
  addUser: UserActions.ADD_USER((name, email, dispatch) => {
    dispatch(name, email);
  })
});

[therealcisse]

The only function that is actually unique is dispatch:

Nice catch. Passing dispatch will be the best idea.

And also, I think not extending actionContext with creator like this:

        function actionContext() {
          return {
            dispatch: function () {
              return dispatch({
                type: actionType,
                handlers: handlers,
                arguments: arguments
              }, properties);
            }
          };
        }

That will pass all tests, but am not so sure it won't break some code out there. Suggestions?

[jhollingworth]

Good stuff.

creator needs to be mixed in so you can call other functions in the action creator

var UserActionCreators = Marty.createActionCreators({
  addUser: UserActions.ADD_USER((name, email, dispatch) => {
    dispatch(name, email);
    this.somethingElse();
  }),
  somethingElse: UserActions.SOMETHING_ELSE()
});

[therealcisse]

I'm using webpack with es6-loader and the above code will be transpiled to:

    var UserActionCreators = Marty.createActionCreators({
      addUser: UserActions.ADD_USER(function(name, email, dispatch)  {
        dispatch(name, email);
        this.somethingElse(); // Fails since this != UserActionCreators here, use UserActionCreators.somethingElse() instead
      }.bind(this)),
      somethingElse: UserActions.SOMETHING_ELSE()
    });

But from an es5 point of view, it makes perfect sense.

I will update the docs for es6 users to explicitly use the global ActionCreator singleton in their callbacks.

Thanks.

[jhollingworth]

This does feel a bit like a misuse of the syntax. Fat arrow function's are designed to ensure that the function context is set to the current context. It's terseness is just a side effect.

I really don't see what value fat arrow functions bring here except removing 6 characters. I'm wondering if its just better to advise against using them here?

[therealcisse]

I'm wondering if its just better to advise against using them here?

That works for me. I updated the docs.

[jhollingworth]

👍 thanks :)