Question

// @flow
import { compose, createStore } from 'redux';
import thunk from 'redux-thunk';

const composedStore = compose(
  applyMiddleware(thunk),
  __CLIENT__ && window.devToolsExtension ? window.devToolsExtension() : f => f
)(createStore)

此代码是来自React-Redux＆＃39; Universal＆＃39;的文件。应用程序样板。我可以在大多数情况下绕过它，虽然在compose函数的第二个参数中的假的情况条件逻辑让我兴奋 - 什么是f => f ???

除非我弄错了，否则这是香草JS等同于

function(f){
  return f;
}

在哪种情况下，f参数来自哪里，这个函数实际返回什么？文件中的任何其他位置都没有其他对f变量的引用。很混乱。

Answer 1

除非我弄错了，否则这是香草JS等同于
function(f){
  return f;
}

相当多，因为函数体不使用this或arguments;几个笔记：

箭头函数（f => f）会关闭this和arguments（而不是对它们有自己的含义），function表达式赢了＆＃ 39;但是，考虑到函数的内容，它并不重要，因为它没有使用它们。
箭头函数是 vanilla JavaScript（自ES2015起）。

在哪种情况下，f参数来自??

与传递给函数的任何回调相同的地方：无论是什么叫它。这个回调被传递到compose，所以要知道它将如何被调用以及使用什么参数，你看看Redux中的compose定义：

每个函数都应该接受一个参数。它的返回值将作为参数提供给左侧的函数，依此类推。唯一的例外是可以接受多个参数的最右边的参数，因为它将为结果组合函数提供签名。

因此该函数将接收applyMiddleware(thunk)返回的函数返回的任何内容。

f => f函数的唯一原因是作者可以使用单行;例如，他们需要为条件运算符的假操作数提供一些东西。他们本可以这样做：

let temp = applyMiddleware(thunk)(createStore);
if (__CLIENT__ && window.devToolsExtension) {
   temp = window.devToolsExtension()(temp);
}
const composedStore = temp;

...但可能想要避开临时变量。

Answer 2

我认为这就像 noop 。如果我们不在Dev Tools扩展中，compose的第二个参数是一个只返回给定值的函数。

const isDevToolExtension = __CLIENT__ && window.devToolsExtension;
const returnItself = function(f) {
   return f;
}

const composedStore = compose(
  applyMiddleware(thunk),
  isDevToolExtension ? window.devToolsExtension() : returnItself
)(createStore)

这段代码有什么作用？

2 个答案: