Рубрики
Без рубрики

Карри прочь в реакции

Аккуратный трюк, используя функциональную концепцию, карри, чтобы очистить свой React Code.

Автор оригинала: Steve Robinson.

Таким образом, вы собираетесь создать компанию Next-Gen Ecommerce, продавая поставки собак, и вы решили использовать React, чтобы построить его с COZ, вы знаете, все это ярость сейчас и выбирая переднюю каркасную структуру, является «первым и Самый важный ответственный шаг «Наращивание любого успешного онлайн-бизнеса.

Я хотел бы поделиться аккуратным хитростью, который я узнал, создавая свой собственный веб-сайт электронной коммерции, очевидно, Next-Gen Coz React!

Фильтрация продуктов на основе различных аспектов – это степл в любом месте покупок, и поэтому давайте добавим некоторые фильтры на страницу результатов продукта.

Это где наши клиенты фильтруют и находят правильные продукты для своих собак

Поскольку любой «хороший» разработчик реагирования, давайте распустим этот интерфейс в Компоненты который довольно проходит в нашем случае.

Это то, что реагирует разработчики, когда они посещают любую веб-страницу

Далее давайте определим Государство В нашем приложении. Единственные элементы данных, которые, возможно, рассматриваются как состояние здесь, являются выбором фильтра. Другие данные, список продуктов, вероятно, будет передан как реквизит и не мутированы.

Фильтенки это объект, который содержит выбранное значение для каждого из фильтров на нашей странице.

filterSelections = { 
  price: ..., 
    ages: ..., 
    brands: ...,
}

Так как Продукты Компонент является общим родителем, который содержит компоненты, которые нуждаются в Фильтенки ( Фильтры и productresults компоненты), это будет соответствующий дом для этого Государство жить в.

Фильтры Компонент после получения Фильтенки В качестве опоры будет передавать соответствующие значения фильтра для каждого из своих детей.

class Filters extends React.Component {
  render() {
    return (
      <>
        
        
        
      
    );
  };
}

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

Эти фильтры не могут быть просто статическими элементами управления, нам нужно для их обновления Фильтенки Поскольку клиент корректирует фильтры.

Мы проходим вниз Фильтенки как реквизит к фильтрам, и мы знаем, что реквизиты неизменяются в реакции. Так где мы мутируем Фильтенки тогда? Ответ на это был бы Продукты Компонент как его владелец Фильтенки Имея это как его государственный.

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

Вот …| Продукты составная часть. 

class Products extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      filterSelections: {
        price: someInitialValue,
        ages: someInitialValue,
        brands: someInitialValue,
      }
    }
  }

  updateFilters = (newSelections) => {
    this.setState({
      filterSelections: newSelections
    })
  };

  render() {
    return(
      <>
        
        
       // React 16 Fragment Syntax - whoohoo!
    );
  }
}

И Фильтры составная часть.

class Filters extends React.Component {
  
  updatePriceFilter = (newValue) => {
    this.props.selectionsChanged({
      ...this.props.filterSelections,
      price: newValue
    })
  };

  updateAgeFilter = (newValue) => {
    this.props.selectionsChanged({
      ...this.props.filterSelections,
      ages: newValue
    })
  };

  updateBrandFilter = (newValue) => {
    this.props.selectionsChanged({
      ...this.props.filterSelections,
      brands: newValue
    })
  };
  
  render() {
    return (
      <>
        
        
        
      
    );
  };
}

Это довольно просто и будет работать. Но у нас есть куча функций в Фильтры Компонент, все, кажется, делают очень похожие вещи.

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

Карри к спасению

Это то, где приходит трюк, и это популярное и модно звучащее функциональное программирование, называемая карри.

Прежде чем говорить о Carrying, я хотел бы показать вам, как это может помочь очистить наш компонент. Взгляните на себя –

class Filters extends React.Component {
  
  updateSelections = (selectionType) => {
    return (newValue) => {
      this.props.selectionsChanged({
        ...this.props.selections,
        [selectionType]: newValue,  // new ES6 Syntax!! :)
      });
    }
  };

  render() {
    return (
      <>
        
        
        
      
    );
  };
}

Аккуратно правильно? Теперь UpdatedSelections Функция называется Curryed. Для функционального программирования AficionAdos там, это довольно простая и простая концепция. Но для таких людей, как я, кто всегда жил на стороне, ориентированных на императив и объектно, это сбивает спутанность. Итак, давайте распадаем это.

Возможно, вы подумали, когда я сказал, что UpdatedSelections () Функция была крична, как будет выглядеть «безразрешенная» версия этой функции. Вот как –

updateSelections = (selectionType, value) => {
  this.props.updateFilters({
    ...this.props.filterSelections,
    [selectionType]: newValue,
  });
}

Если бы мы использовали это вместо нашей версии Currich, нам нужно сделать каждый из фильтрованного компонента Compont Call Обновления сами и таким образом, чтобы заставить их осознавать имя атрибута в Фильтенки Что им нужно обновить, что слишком много сцепления.

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

Наше решение для Карри Эта функция.

Что за карри?

Carrying преобразует функцию F в функцию F ' который принимает участие в аргументах, которые F изначально необходим и вернут другую функцию, которая может взять в остальные аргументы, возвращая результат F или может быть карта.

Конкретно, возьмите это просто Добавить функция,

add = (x, y) => x + y;

При курчании это становится –

curriedAdd = (x) => { return (y) => { return x + y; }}

Так вместо того, чтобы звонить Добавить (1, 2) Мы могли бы позвонить Curredadd (1) который возвращает новую функцию, которую мы могли бы впоследствии позвонить с другим аргументом Добавить , как Curredadd (1) (2) и получить окончательный результат 3 Отказ

Технически звонит, curredadd (x) называется «частичное приложение», как в, мы применяем только часть аргументов, которые оригинальная функция Добавить (x, y) нужный.

Carrrying Регулярная функция Давайте выполним частичное приложение на нем.

Это наивный пример игрушки, который не имеет большой утилиты.

Теперь, если мы вернемся к нашему оригинальному примеру –

updateSelections = (selectionType) => {
  return (newValue) => {
    this.props.selectionsChanged({
      ...this.props.filterSelections,
      [selectionType]: newValue,
    });
  }
};

Мы можем видеть, как частичные приложения Обновления функция –

updateSelections('ages');updateSelections('brands');updateSelections('price');

помог нам очистить наш компонент и уменьшить муфту. Это карри

Как и все проблемы в программном обеспечении, это не единственное решение этой проблемы. Вот альтернативное решение –

class Filters extends React.Component {
  
  updateSelections = (selectionType, newValue) => {
    this.props.selectionsChanged({
      ...this.props.filterSelections,
      [selectionType]: newValue, 
    });
  };

  render() {
    return (
      <>
         this.updateSelections('price', value)} 
        />
         this.updateSelections('ages', value)} 
        />
         this.updateSelections('brands', value)} 
        />
      
    );
  };
}

Я надеюсь, что вы нашли эту технику полезными. Если вы использовали Carrying в вашем проекте JavaScript/React, поделитесь спрятанными фрагментами в комментариях ниже, а также ваши другие комментарии и отзывы приветствуются ❤.

Читайте ещё по теме: