如何将这个功能性 React 组件更改为使用 Recompose 的组件？

Question

我有以下功能组件，我有兴趣了解如何将其更改为 branch 增强组件，而不是 if 声明。

import React from 'react'
import PropTypes from 'prop-types'
import { Button, Icon, Label } from 'semantic-ui-react'
import { Link } from 'react-router-dom'
import { setPropTypes, branch } from 'recompose'

const LoginOrMiniProfile = ({presence}) => {
    if (presence.account) {
        return (
            <Link to='/profile'>
                <Label>
                    <Icon name='user circle outline' />
                    {presence.account.firstName}
                </Label>
            </Link>
        )
    } else {
        return (
            <div>
                <Button primary className={`login ${presence.loading && 'loading'}`}>Signup</Button>
                <Button className={`login ${presence.loading && 'loading'}`}>Login</Button>
            </div>
        )
    }
}

export default setPropTypes({
    prensence: PropTypes.object.isRequired
})(LoginOrMiniProfile)

为了加分，如何使用 Recompose 访问和更改 Redux 存储中的 presence？

Answer 1

这里是一个简单的例子来实现你想要的。您可以（并且应该）进行一些重构，例如在其他地方定义内联功能组件。

compose(
  connect(
    ({ presence }) => ({ presence }), // get presence from the redux store via `connect`
    {
      updatePresence: updatePresenceActionCreator // inject dispatch(updatePresence) to props
    }
  ),
  setPropTypes({
    prensence: PropTypes.object.isRequired,
    updatePresence: PropTypes.func.isRequired
  }),
  branch(
    ({ presence }) => presence.account,
    renderComponent(({ presence }) =>
      <Link to="/profile">
        <Label>
          <Icon name="user circle outline" />
          {presence.account.firstName}
        </Label>
      </Link>
    )
  )
)(({ 
  presence,
  updatePresence // you can update your presence by invoking this function
}) =>
  <div>
    <Button primary className={`login ${presence.loading && "loading"}`}>
      Signup
    </Button>
    <Button className={`login ${presence.loading && "loading"}`}>Login</Button>
  </div>
);

如何将这个功能性 React 组件更改为使用 Recompose 的组件？

How would one change this Functional React Component to one that uses Recompose?

reactjs

react-redux

recompose