如何将ramda与重构相结合？

Question

我有这个组件;

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

export default ReposGrid

这工作正常但我想渲染加载器组件，如果repos为空。我重新组合的branch没有做任何事情。它没有显示Loader在加载时也没有显示repos。我可以在这里申请R.ifElse吗？

Answer 1

你可能会混淆ramda的pipe / compose并重新组合，以及他们采取的论点。您的链条由高阶组件和在道具上运行的功能组成。最好将数据处理保存在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