我如何将 ramda 与 recompose 结合起来？

Question

我有这个组件；

const ReposGrid = R.pipe(
    R.prop("repos"),
 // branch(R.isEmpty, renderComponent(Loader)),
    R.map(Repo),
    ReposWraper
)

export default ReposGrid

这很好用，但如果 repos 为空，我想渲染加载程序组件。我的 branch 来自 recompose 只是没有做任何事情。它不显示 Loader 加载时也不显示 repos。我可以在这里申请R.ifElse吗？

Answer 1

您可能混淆了 ramda 的 pipe/compose 和 recompose，以及它们采用的参数。您的链由高阶组件和在 props 上运行的函数混合组成。最好将数据处理保持在 mapProps/withProps 等

您也许可以像这样实现类似于您所追求的目标：

import { map, evolve, propSatisfies, isEmpty } from 'ramda'
import { compose, branch, renderComponent, mapProps, renameProp } from 'recompose'

const Repo = (repo) => <div>Repo {repo}</div>
const Loader = () => <div>Loader</div>
const RepoGridBase = props => <div>{props.children}</div>

const ReposGrid = compose(
    branch(
      propSatisfies(isEmpty, 'repos'),
      renderComponent(Loader),
    ),
    mapProps(evolve({
      repos: map(Repo)
    })),
    renameProp('repos', 'children')
)(RepoGridBase)

function App() {
  return (
    <div className="App">
      <ReposGrid repos={[]} />
      <ReposGrid repos={['one', 'two']} />
    </div>
  );
}

（这将引发关键警告，您最好在组件内部显式执行 map）

codesandbox link

我如何将 ramda 与 recompose 结合起来？

How do I combine ramda with recompose?

reactjs

ramda.js

recompose