Функция compose

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

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

Compose нет в нативном Javascript, как и в самом React. Ее можно получить при помощи сторонних бибилотек. Например, она есть в Redux.

Зачем нужна в React?

Функция compose в React:

1. Позволяет более удобно оборачивать конструкторные компоненты вокруг других компонент. В том числе применять High Order Component (функции, позволяющие создавать шаблонно конструкторные компоненты).
2. Сокращает код.
3. Мы сразу видим порядо действий.
4. Можно легко удалить звено из цепочки функций.

Как использовать?

Синтаксис применения выглядит так:

Здесь первой выполнится function3 – наша целевая компонента в отдельных скобках. А а затем “низу в верх” поочередно ее результат примет и обработает funtion 2 и function1.

После установки библиотеки redux методика применения следующая:

1. Импортируем сверху в коде файла
   import { compose } from 'redux';
2. Например, код без connect выглядит так (это последние строки файла ProfileContainer.jsx):

   let mapStateToProps = (state) => ({
       profile: state.profilePage.profile
   });
   
   let AuthRedirectComponent = withAuthRedirect(ProfileContainer);
   
   let WithUrlDataContainerComponent = withRouter(AuthRedirectComponent);
   
   export default connect(mapStateToProps, {getUserProfile}) (WithUrlDataContainerComponent);

   Здесь классовая презентационная компонента ProfileContainer 1) принимается функцией withAuthRedirect, которая является хоком, создающим редеректы; 2) затем результат передается в withRouter, который позволяет получить параметры из url; 3) и уже потом результат идет в connect, для связи со стором и экспортируется по дефолту.

3.  Все это мы можем при помощи compose записать следующим образом:

   let mapStateToProps = (state) => ({
       profile: state.profilePage.profile
   });
   
   export default compose(
       connect(mapStateToProps, {getUserProfile}),
       withRouter,
       withAuthRedirect
   )(ProfileContainer)

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