Заметки про React(@ru_react_notes). Гексагональная архитектура в React Основная идея в гексагональной архитектуре, чистой архитектуре и

Гексагональная архитектура в React Основная идея в гексагональной архитектуре, чистой архитектуре и других похожих парадигмах заключается в концепции разделения слоев и выделении отдельного доменного слоя. При обсуждении применения гексагональной архитектуры для приложения React возникает вопрос о правильном применении. Алекс Кондов рассказал о подходе к разработке приложений на React с применением гексагональной архитектуры. Для доступа к доменной логике в компонентах используются хуки. Хуки – это адаптеры между React и вашим доменным кодом. Под доменным кодом имеются в виду запросы в API, управление пользователем или любой другой бизнес-сущностью. Сама доменная логика может быть реализована с помощью любой удобной парадигмой программирования. В качестве примера можно посмотреть на react-query. Эта библиотека написана с помощью ООП и использует хуки как адаптер к React.

function PostPage({ postId }) {
  const { post, error, bookmarkPost, reactToPost } = usePost(postId);

  // --snip--
}

function usePost(postId) {
  const [post, setPost] = useState(null);
  // --snip--

  const getPost = () => {
    client.getPost(postId).then(setPost).catch(setError)
  }

  const bookmarkPost = () => {
    client.bookmarkPost(postId, userId);
  };

  useEffect(() => {
    getPost()
  }, [])

  // --snip--

  return {
    post: mapToDomainObject(post),
    bookmarkPost,
    // --snip--
  };
}

alexkondov.com/hexagon…in-react