如何在 Purescript Halogen 中实现诸如自动增量计数器之类的东西答案

【问题标题】：How to implement something like an autoincrement counter in Purescript Halogen如何在 Purescript Halogen 中实现诸如自动增量计数器之类的东西
【发布时间】：2019-06-09 19:02:52
【问题描述】：

给定一个非常简单的增量组件，例如 React：

class Increment extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      value: props.value
    }
  }

  componentDidMount() {
    setInterval(() => {
      this.setState(({ value }) => ({ value: value + 1 }))
    }, 1000);
  }

  render(){
    return (
      <p>{ this.state.value }</p>
    );
  }
}


ReactDOM.render(<Increment value={0} />, document.getElementById('root'))

这如何转化为 Purescript 的卤素？在网上浏览了各种各样的东西，我还没有找到任何可以制作我自己原型的例子。我知道Effect.Time 暴露了setInterval，但是我将如何使用它来触发可以让我更新状态的东西（在受控操作中，通过handleAction）。

我正在尝试将应用程序从 Elm 移至 Halogen，并且在该应用程序中，它依赖于 subscriptions 函数来更新与直接用户输入无关的应用程序状态的关键功能.如果 Halogen 具有类似的功能（我见过 subscribe，虽然这似乎与父/子组件之间的通信有关，但我可能误解了这一点......）最好指出它。

【问题讨论】：

标签： events purescript halogen purescript-halogen

【解决方案1】：

这是一个用卤素编写的counter 示例，代码在purescript-halogen-storybook example。

要使其自动递增，您可以在初始化处理程序中添加一个自循环函数。

loop = 
  H.liftAff $ Aff.delay $ Aff.Milliseconds 1000.0
  H.modify_ \s -> s { value = s.value + 1 }
  loop

handleAction Initialize = loop

查看官方lifecycle示例，了解如何使用initialize。

【讨论】：