Come "leggere" le funzioni freccia in ES6?

const foo = (property) => { return property + 'bar' }

In JavaScript, le funzioni sono oggetti. Ciò significa che possono essere passati in giro e assegnati a variabili (voglio dire, anche altri linguaggi lo supportano e lo stanno adattando sempre di più, ma JavaScript è praticamente costruito su questo).

Per comprendere le funzioni di freccia grossa ES6, è utile sapere a cosa si espande la funzione e le poche nuove regole fornite con le funzioni anonime ES6, come ad esempio:

• lexical this
• ritorno implicito
• non usare le parentesi per le funzioni di un singolo parametro

Tenendo presente questa conoscenza, la parte di codice citata potrebbe apparire come una delle seguenti varianti:

const foo = property => { return property + 'bar' }
const foo = (property) => property + 'bar'
const foo = property => property + 'bar'

E tutto si espande in:

var foo = function(property) {
    return property + 'bar'
}

Se hai familiarità con i puntatori in linguaggi come C o C ++, ciò che fa la sintassi della fat fat è che crea una funzione e restituisce un puntatore a funzione che può essere assegnato a una variabile sul lato sinistro dell'equazione. / p>

Questa è la cosa principale che hai sbagliato, non stai restituendo alcuna proprietà magica che è assegnata alla costante foo variabile, la proprietà è una funzione, e il gioco è fatto.

Quindi, anche se inizialmente il codice di Redux potrebbe sembrare un po 'scoraggiante, in realtà non si espande più di poche funzioni concatenate l'una nell'altra.

var actionLogger = function actionLogger(input) {
  var dispatch = input.dispatch;
  var getState = input.getState;

  return function (next) {
    return function (action) {
      console.log(action);
      return next(action);
    };
  };
};

Il logger delle azioni viene quindi chiamato in questo modo:

// You pass a dispatch and getState variables to it
var dispatchedLogger = actionLogger({dispatch: someDispatch, getState: someState});

// You define a function that is supposed to fire after each action
// Each action type will be modified by apending 'bar' to it
var withFollowUpAction = dispatchedLogger(action => action + 'bar');

// Finally you run it with the desired action
withFollowUpAction('someAction');

Ora non ho davvero lavorato con Redux, ma credo che il motivo per cui le funzioni sono incatenate come sono a causa dell'API della libreria Redux, che sa come consumarlo.

const foo = (property) => { return property + 'bar' }

How do I read that?

Definisci una costante foo uguale a una funzione che accetta un argomento, proprietà e restituisce proprietà + barra.

In generale,

(...) => { ... }

è per lo più equivalente a

function(...) {...}

(ci sono differenze in termini di come viene gestito this .)

Quindi quanto sopra è quasi equivalente a:

const foo = function(property) {return property + 'bar'}

Ma potremmo anche scriverlo:

const foo = (property) => property + 'bar'

Se => non è seguito da { , allora definisce una funzione che restituisce un'espressione javascript. Quindi, senza {

(...) => ...

È principalmente equivalente a

function(...) => {return ...}

Per gli esempi di redux:

const actionLogger = ({dispatch, getState}) => (next) => (action) => { 
  console.log(action); return next (action) 
}

Estendiamolo:

const actionLogger = function({dispatch, getState}) {
    return function(next) {
        return function(action) {
            console.log(action)
            next(action);
        }
    }
}

L'esempio di Redux è un po 'confuso perché fa qualcosa di strano. La sua definizione di una funzione che restituisce una funzione che a sua volta restituisce un'altra funzione. Credo che Redux lo faccia perché imita la funzione currying trovata nei linguaggi funzionali, anche se la trovo fuori posto qui.