这段代码是做什么的

What does this code do?

本文关键字：什么 代码 段代码      更新时间：2023-09-26
// @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"通用"应用程序样板的文件。我可以在大多数情况下把我的头绕起来，尽管在第二个参数的假情况条件逻辑的撰写函数绊倒了我-什么是f => f ??

除非我弄错了，这是JS中与

等价的东西。
function(f){
  return f;
}

在这种情况下，f参数来自哪里，这个函数实际上返回什么??在文件的其他任何地方都没有对f变量的其他引用。非常让人困惑。

除非我弄错了，这是JS中与

等价的东西。
function(f){
  return f;
}

差不多，因为函数体不使用this或arguments;注意事项:

  1. 箭头函数(f => f)关闭this和arguments(而不是对它们有自己的含义)，function表达式不会，但给定函数的内容无关紧要，因为它不使用它们。

  2. 箭头函数是香草JavaScript (ES2015)。

在这种情况下，f参数是从哪里来的??

与传递给函数的任何回调相同的地方:Whatever调用它。这个回调将被传递到compose，所以要知道它将如何被调用以及使用什么参数，您可以查看Redux中的compose定义:

每个函数只能接受一个参数。它的返回值将作为左侧函数的参数提供，依此类推。唯一的例外是最右边的实参，它可以接受多个形参，因为它将为生成的组合函数提供签名。

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

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

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

…但是可能想要避免使用临时变量

我觉得这就像一个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)
相关文章：