你如何从 recompose 中读取这个 curry'd 函数……我的脑痛

Posted 2023-02-21

【中文标题】你如何从 recompose 中读取这个 curry\'d 函数……我的脑痛

【英文标题】：How do you read this curry'd function from recompose.. my brain hurts你如何从 recompose 中读取这个 curry'd 函数……我的脑痛

【发布时间】：2019-08-18 07:16:07

【问题描述】：

在我的工作中，我们使用 recompose，我们使用这种柯里化函数，对我来说这似乎过于复杂并且让我的大脑受伤。

谁能用英语解释一下这是如何工作的？

谢谢

  withStateHandlers(( readAt, isSender ) => ( trackVisibility: !isSender && !readAt ), 
    updateTrackVisibility: () => () => (
      trackVisibility: false,
    ),
  ),

我知道 readAt 和 isSender 来自上面声明的片段。 最令人困惑的部分是在updateTrackVisibility之后返回另一个函数的函数???

【问题讨论】：

withStateHandlers 使用两个参数调用。第一个是一个接受两个参数并返回一个新对象的函数，第二个是一个具有属性的对象，该属性包含一个函数，该函数返回另一个返回类似对象的函数。这些箭头函数都不是必需的，所以如果它有助于您理解它，您可以将它们替换为常规函数。

模式() => 表示延迟计算（可以说是显式惰性求值）或忽略其参数的函数。 updateTrackVisibility 可能表示后者。但是，结果值是硬编码的，这使得嵌套箭头函数非常无用。我更喜欢这样的东西：const comp = f => g => x => f(g(x)); const constant = x => _ => x; const constant2 = comp(constant) (constant) 然后constant2(false) (true) (true) 产生false。

糟糕的代码会让任何人的大脑受伤。双重() => () => ... 是一个严肃的code smell。 @Kevin B，您不调用带参数的函数，而是调用带参数的函数；参数绑定到函数的参数。

【参考方案1】：

来自recompose API：

withStateHandlers(
  initialState: Object | (props: Object) => any,
  stateUpdaters: 
    [key: string]: (state:Object, props:Object) => (...payload: any[]) => Object
  
)

props 是从 parent（或上面的 HOC）传递的 props

state 从 initialState

中创建的对象传递

payload 参数是从我们触发函数的地方（处理程序）传递的

这在你的代码中意味着：

第一个参数 - ( readAt, isSender ) => ( trackVisibility: !isSender && !readAt ) - 制作一个名为 trackVisibility 的道具（带有编码值）

第二个参数 - 添加一个函数，当触发时，使trackVisibility 为假

另一个（人为的）例子：

const enhancer = withStateHandlers(( title, text, maxChars ) => ( isLongTitle: title.length > maxChars, text ), 
  addText: (state, props) => (text) => (
    text: state.text + text,
    isLongTitle: state.text.length + text.length > props.maxChars
  ),
)

const MyComponent = enhancer(props => 
  return (
    <input onChange=event => props.addText(event.target.value) />
  )