Советы по React - Компоненты высшего порядка

Короче говоря, компонент более высокого порядка - это функция, которая принимает компонент и возвращает новый компонент, не более того.

Иногда вы можете захотеть расширить компонент, чтобы добавить больше функциональности, но не хотите добавлять непосредственно к нему по многим причинам. Давайте посмотрим на пример:

//HoC for check authentication
import React, { Component } from 'react';
import { connect } from 'react-redux';
export default (ComposedComponent) => {
   class RequireAuth extends Component {
      componentWillMount() {
         if (!this.props.authenticated)
            this.props.history.replace("/");
      }
      componentWillUpdate() {
         if (!this.props.authenticated)
            this.props.history.replace("/");
      }
      render() {
         return (
            <ComposedComponent { ...this.props } />
         )
      }
   }
   function mapStateToProps({ auth: { authenticated }}) {
      return {
         authenticated
      }
   }
   return connect(mapStateToProps)(RequireAuth);
}

В этом примере мы создали функцию, которая принимает компонент в качестве аргумента и проверяет (через Redux), аутентифицирован ли пользователь, если не перенаправляет на «/».

В этом примере connect также является компонентом высокого порядка, который позволяет нашему компоненту получать доступ к хранилищам и создателям действий с помощью Redux.

Как видите, мы не добавляли новое поведение к исходному компоненту, но оно будет отображаться только в том случае, если пользователь аутентифицирован. Это один из способов защиты компонентов, к которым можно получить доступ только после входа пользователя в систему. Давайте посмотрим, как мы можем использовать этот HoC:

В приведенном выше примере компоненты Stores, StoreProducts, Cart и OrderList доступны только в том случае, если пользователь аутентифицирован.

Спасибо,