es6多个箭头函数

Question

es6多个箭头函数看不太懂，例如下面这一段reddit=>dispatch=>...这多重的箭头函数该怎么看

const fetchPosts = reddit => dispatch => {
  dispatch(requestPosts(reddit))
  return fetch(`https://www.reddit.com/r/${reddit}.json`)
    .then(response => response.json())
    .then(json => dispatch(receivePosts(reddit, json)))
}

Answer 1

babeljs.io 在线转译
有不懂的，或者在学习过程中看不懂，希望去官方把ES6代码转译成你能认识的ES5代码。这样就一目了然了。

看看，这个转后的代码。你看得懂么？

"use strict";

var fetchPosts = function fetchPosts(reddit) {
  return function (dispatch) {
    dispatch(requestPosts(reddit));
    return fetch("https://www.reddit.com/r/" + reddit + ".json").then(function (response) {
      return response.json();
    }).then(function (json) {
      return dispatch(receivePosts(reddit, json));
    });
  };
};

Answer 2

可以理解为

const fetchProps = function (reddit) {
    return function (dispatch) {
        dispatch(requestPosts(reddit))
        return fetch(`https://www.reddit.com/r/${reddit}.json`)
            .then(response => response.json())
            .then(json => dispatch(receivePosts(reddit, json)))
    }
}

但是 箭头函数跟普通函数还是有区别的, 这样只是方便理解.
具体可以参考 http://es6.ruanyifeng.com/#do...

Answer 3

const functionA = () => () => 123;

可以理解成：

functionB = () => {
    return 123;
}
functionA = () => {
    return functionB;
}

一层一层从后往前的去剥离就是了