Так тоже лучше не делать. Такая конструкция и читается хуже и в нее трудней вносить изменения. Хандлеры лучше передавать явно.
Давайте лучше разберем более приближенный к реальности кейс:
const Comment = ({ comment, meta, author, postLike, me }) => {
const [shouldShowReply, setReply] = useState(false);
const toggleReply = useCallback(() => {
setReply(s => !s);
}, []);
const handleLikeClick = useCallback(() => {
postLike(comment.id, me.id);
}, []);
const isLiked = useMemo(
() => meta.likes.some(like => like.user_id === me.id),
[meta.likes],
);
return (
<Wrapper>
<Avatar src={user.avatar} to={`/users/${user.slug}`} />
<CommentBody text={comment.body} />
<Icon name="like" isActive={isLiked} onClick={handleLikeClick} />
<Button type="link" onClick={toggleReply}>Reply</Button>
{shouldShowReply && <ReplyForm />}
<Wrapper/>
);
}
const mapStateToProps = (state, ownProps) => ({
me: meSelector(state),
author: commentAuthorSelector(state, ownProps),
meta: commentMetaSelector(state, ownProps),
});
const mapDispatchToProps = {
postLike,
};
export default connect(mapStateToProps, mapDispatchToProps)(Comment);
Смотрите, что у нас получается, наш комментарий обрабатывает клик по аватару и клики по кнопкам Like и Reply.
Клик по аватару обрабатывается ссылкой роутера, а благодаря композиции реализация от нас скрыта и мы просто знаем, что в аватар достаточно передать src картинки и ссылку.
Клик по лайку обрабатывается асинхронной функцией действием, которая подключается с помощью HOC connect.
Клик по Reply обрабатывается внутренним хандлером компонента и изменяет его состояние.
На выходе мы имеем интерфейс для комментария подключенного к хранилищу следующего вида:
<Comment comment={comment} />
Для не подключенного:
<Comment
me={me}
author={author}
meta={commentMeta}
postLike={postLike}
comment={comment}
/>
Плоская структура позволяет нам во-первых быстрей анализировать код.
Во-вторых без лишних телодвижений его изменять, декомпозировать, подключать к state management библиотеке и тд.
Геттеры и сеттеры без необходимости лучше никогда не использовать. Так как они, опять же, затрудняют анализ. Исключение - использование инструментов приветствующих их использование.
И еще - что лучше тут - бинд или стрелочная функция?
Это есть в
документации.
