我应该如何使用 Calm JS 和 React 在组件鼠标点击上触发 XHR？

Question

我想要的是触发 XHR.perform onMouseClick，使用 CalmmJS 和 React - 我正在尝试以下代码，已编辑不必要的部分：

const getResults = someArg => XHR.perform({
    timeout: 60 * 1000,
    responseType: 'json',
    method: 'POST',
    url: U.string`/api/${ facet }/end-point/`,
    body: U.stringify( someArg )
});
...
<SomeElement
    ...
    onMouseClick={ U.ifElse(
            shouldMakeXHR, /* Atom that runs its own debounced XHR checks, then
                              runs it through an R.equals to see if the result
                              is acceptable - result is either true or false */
            _ => getResults( someArg ),
            R.identity //as no-op
    ) }
/>

目前我只是试图触发网络请求，而不是对结果做任何事情。相反 XHR.perform 只是被吞没了。我做错了什么？

PS：有人可以用 karet 或 karet.util 标记我的 post，因为我无法创建标记。感谢您的帮助！

Answer 1

这是我出于某种原因一直在努力反对的另一个基本问题。

答案是不使用常规函数，而是利用 karet.util 库和 ~~U.doPush U.bus() 流的值。 official CalmmJS documentation actually points you to a really clear and simple example demonstrating this behaviour.~~ ~~U.doSet 一个常规值 U.atom(),~~ 虽然我开始认为一定有更好的方式......如果我找到它会更新这个答案。

有更好的办法！直接来自 Vesa Karvonen/@polytypic 本人：

const requestsBus = U.bus()

const xhrProperty = XHR.perform(U.toProperty(requestsBus)) 

<button
  onClick={U.doPush(requestsBus, {
        timeout: 60 * 1000,
        responseType: 'json',
        method: 'POST',
        url: U.string`/api/${ facet }/end-point/`,
        body: U.stringify( someArg )
})}>
  Request!
</button>

这是原始的几乎可以工作的代码，为了 posterity - 请勿使用此行下方的代码 - 见上文

const mouseClick = U.atom( false );
const makeRequest = someArg => XHR.perform({
timeout: 60 * 1000,
responseType: 'json',
method: 'POST',
url: U.string`/api/${ facet }/end-point/`,
body: U.stringify( someArg )
});
const getResponse = U.when( mouseClick,
    XHR.responseFull( makeRequest( someArg ) );
...
<p>{ U.stringify( getResponse ) }</p>
<SomeElement
...
    onClick={ U.ifElse(
        shouldMakeXHR, /* Atom that runs its own debounced XHR checks, then
                          runs it through an R.equals to see if the result
                          is acceptable - result is either true or false */
        U.doPush( mouseClick, true ),
        R.identity //as no-op
) }
/>

请注意，只要第一次单击鼠标后 someArg 发生变化，这将继续发出 XHR post 请求。

我应该如何使用 Calm JS 和 React 在组件鼠标点击上触发 XHR？

How should I trigger an XHR on component MouseClick using CalmmJS and React?

reactjs

reactive

kefir.js

calmm