Ответы пользователя по тегу React
  • Как вернуть продукт обратно, изменив количество?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Создаете экшен:
    const removeFromCart = productId => ({
      type: types.REMOVE_FROM_CART,
      productId
    })


    затем в редьюсере корзины, делаете так, чтобы на это действие был свой case, и в нем чтобы возвращался новый массив addedIds в котором уже не будет id из вашего экшена если quantityById меньше единицы (то есть, данной позиции больше не должно быть в корзине), либо изменяете quantityById ... суть в том, чтобы вы вернули новое состояние.

    так же, для редьюсера товаров вы делаете кейс на этот же экшен - и там так же по id находите и добавляете новый элемент.

    В общем, я думаю тут дело не сколько в реализации кода, а в понимании что такое экшены и редьюсеры. Почитайте в учебнике (на русском), поделайте пример и я думаю без проблем разберетесь с вашим вопросом.
    Ответ написан
    Комментировать
  • Как реализовать компонент "Сохранить"?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    вариант "при клике на like я меняю false на true самой карточки товара" - ОК (имеется ввиду, вы меняете одно из свойств в объекте с данными об этом объявлении, например: isFavourite: true)

    В реальном приложении еще запрос улетает на сервер, что клиент такой-то отметил такой-то объект в избранное.
    Ответ написан
  • Какая библиотека удобна для бесконечной загрузки на react?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Судя по гитхабу, infinite scroller развивается и документация неплохая, предлагаю поразбираться еще с этой библиотекой.

    Функцию подгрузки нужно описывать вам (и это хорошо), в примере есть (начало, и тело функции).

    Вряд ли будет библиотека, которая позволит задать параметр "nextPages(6)" и все.. так как, подобные библиотеки по хорошему не должны знать о логике для загрузки (на всех проектах она разная).
    Ответ написан
    Комментировать
  • Как быстро учить фреймворки? Например react js?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Документация - отличный вариант.
    Так же, быстро выучить основы реакт можно по этому туториалу (ру текст)
    Ответ написан
    Комментировать
  • Почему вываливается Actions must be plain objects. Use custom middleware for async actions если мидл подключен?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    const selectCountry = (country: any): any => {
      console.log(country);
      return {
         type: 'MY_TEST_ACTION',
      }
    };


    если используете короткую запись, то console.log не добавить. Не забывайте про type
    const selectCountry = (country: any): any => ({ // добавилось (
      type: 'MY_TEST_ACTION',
    }); // добавилось )


    ну и собственно проблема: текст ошибки после перевода: экшен должен быть объектом. У вас было undefined, так как не было return { }
    Так же у экшена, обязательно должно быть поле type
    Ответ написан
    2 комментария
  • Как деплоить проект написанный на reactjs?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Добрый день. Переносите бэкэнд на express на хостинг и запускаете. Так же переносите клиентский код на хостинг и запускаете.
    Если у вас сразу и клиент и сервер в одном проекте - то посмотрите, что у вас разное локально и на хостинге.

    google по поводу деплоя на heroku
    Ответ написан
    Комментировать
  • Как практиковать react, redux, router?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Попробуйте решить эти тестовые задания
    Ответ написан
    Комментировать
  • Разработка на React после AngularJs. Может ли полностью заменить? Каким образом?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Три популярнейших продукта: Angular / Vue / React.
    Покрытие всех фронтовых задач 100%

    p.s. ключевые слова в экосистеме: react, redux/mobx, react ui (гугл), react-router / reach-router, flow ;)
    Ответ написан
    Комментировать
  • Прошу хорошую книгу по JS?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    из фреймворков интересует react и electron

    Основы React II-е издание (2018)
    Ответ написан
    Комментировать
  • Можно ли после основ JS перейти к изучению React?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Возьмите этот туториал и пройдите его. Там по ходу пьесы есть ссылки на MDN / Learn.javascript.ru

    В процессе обучения, задавайте себе вопросы: понимаю ли я что написал? Если не понимаю - что именно?
    С вопросами можно заходить в телеграм каналы по js/react (по реакту, там найдете в описании и по js). Каналы реально работают, несмотря на "токсичность". На хороший вопрос, часто находится кто-то, кто готов ответить буквально "сейчас".

    Как сказал Владимир Проскурин - если есть коллега опытный и который готов делиться знаниями - то еще быстрее будете "вкатываться".

    Одно могу сказать точно - на реальных задачах, при должном упорстве возвращения в теорию, будете расти очень быстро.
    Ответ написан
    1 комментарий
  • Как дергать апи при переходе на определенные роуты для проверки авторизации?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    У react-router v3 был такой хук onEnter, у 4й версии его нет.
    В PrivateRouter компоненте, добавьте проверку на новые пропсы (с помощью getDerivedStateFromProps или componentWillReceiveProps [устаревает]), где смотрите - если роут (из match) изменился - делайте запрос в API.

    Если используете reach router, то не в курсе. Не смотрел его.
    Ответ написан
  • Тестирование React Redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    1 - да стоит тестировать каждый action, reducer (юнит-тесты) и какие-то моменты из компонентов (так как для всего компонента можно сделать снапшот + точечно покрыть желаемые места юнит тестами). Все функции, которые у вас в utils/helpers (вспомогательные) - тоже нужно покрывать юнит-тестами.

    2 - По туториалам для unit-тестирования:
    a) тестирование логики (экшены/редьюсеры)
    б) тестирование компонентов (включая снапшоты)

    3) Jest, enzyme. Пробовал (и тоже неплохо) - mocha, chai. Для e2e использовали puppetter, интересным выглядит cypress. Для тестирования саг юнит тестами - либо по доке, либо с помощью redux-saga-test-plan
    Ответ написан
    Комментировать
  • Как вы решаете проблемы производительности React/Redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Как вам правильно подсказали в комментарии - нужно профилировать.
    Для этого загружаетесь с панелью разработчика, нажимаете Profile и смотреть где у вас проблемы.

    Так же, легкий способ для начала - добавить console.log в рендер компонентов, и смотреть нет ли лишних перерисовок. Конечно, добавлять не нужно сразу везде, а можно постепенно покрывать (либо фичу, либо страницу, либо просто то - что кажется большим и ресурсоемким).

    Использование shouldComponentUpdate - один из самых распространенных и действенных способов.

    По вопросу: стало тормозить React/Redux-приложение - добавляйте больше конкретики, будет видно. Все индивидуально, но обычно самые простые советы - использовать SCU, дробить на мелкие компоненты, дробить данные для редьюсеров (не хранить все в одном большом), использовать селекторы, минимизировать выполнение трудных расчетов (может у вас где-то банально "тяжелая" функция постоянно пересчитывает результат, а это не нужно)

    p.s. неплохая статья на EN - https://medium.com/@alexandereardon/dragging-react...
    Ответ написан
    Комментировать
  • Заменить все совпадения в тексте на ссылку?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Вам нужно искать с помощью регулярного выражения, конструкции типа:
    [буквы/символы](буквы/символы)
    // с регуляркой, к сожалению не подскажу, не силен
    // зато подскажет StackOverflow
    // https://stackoverflow.com/questions/37462126/regex-match-markdown-link


    По мере их нахождения, брать первую найденую часть - ее вставлять вместо name of link, а вторую найденую часть - вместо link. Регулярки сохранять найденое в переменные (первое вхождение, второе вхождение) - тоже умеют.

    Итого, что получается: нагуглив регулярку, или набросав ее в онлайн редакторе (я использую этот) вы получите необходимые вам переменные в массиве, затем с легкостью сможете преобразовать все вхождения с помощью .replace на <Link to={link}>name of link</Link>
    Ответ написан
    Комментировать
  • Как поменять background-image только после загрузки самого изображения react?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Это можно сделать с помощью new Image()и подписки на onload событие.
    Пример взят из кода к учебнику по redux

    class BigPhoto extends React.Component {
      state = {
        isLoading: false,
      }
      componentDidMount() {
        this.loadImage(this.props.url)
      }
      loadImage = src => {
        this.setState({ isLoading: true })
    
        let img = new Image()
        img.onload = () => {
          this.setState({ isLoading: false })
        }
    
        img.src = src
      }
      render() {
        const { isLoading } = this.state
        const { url } = this.props
        return isLoading ? <p>Загружаю...</p> : <img src={url} alt="big vk" />
      }
    }


    Главное помнить, что загрузка изображения начинается только тогда, когда ему проставлен атрибут src. Функция обработчик на onload должна быть определена заранее! В данном подходе мы используем нативный функционал браузера и js, это подходит не только к react
    Ответ написан
    Комментировать
  • Как исправить Cannot read property 'params' of undefined?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Нужно разобраться в причине появления этой ошибки.
    Суть ее в том, что у вас this.props.match - undefined, а это значит (скорее всего, так как кода не вижу) - вы рендерите компонент не из <Router /> компонента (или не из обертки withRouter).

    Если с причиной разбираться нет желания, и хочется просто сделать "заплатку", то можно сделать так:
    componentDidMount() {
      if (this.props.match && this.props.match.params.postID) {
        const postID = this.props.match.params.postID
          axios.get(`http://127.0.0.1:8000/api/${postID}`)
          .then(res => {
            this.setState({
              post: res.data
            });
          })
        }
    // если надо можете сделать else
      }
    Ответ написан
    Комментировать
  • Что посоветуете для реализации локализации в прилежнии на react+redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Я делал с помощью react-intl

    Также популярный - react-i18next
    Ответ написан
    Комментировать
  • Пакеты для имплементации нотификейшенов на react.js?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Взгляните на этот пакет: react-notification-system, но похоже, что активно уже ничего там не делается...

    Еще вижу в топе гугла новый (раньше не было) - react-toastify
    Ответ написан
    2 комментария
  • Как правильно сделать поля ввода на react?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Ответ написан
    Комментировать
  • Как создать фильтр товаров на react, если фильтр и товары выводястя в разных компонентах?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Вам нужно хранить состояние фильтров в редьюсере (или редьюсерах), и затем в компонентах подписываться на эти "кусочки" с помощью mapStateToProps. Вот и все)

    Суть Redux как раз в том, что у вас есть единое состояние всего вашего проекта, и где бы вы ни были (через роутер или без) - вы можете просто приконнкектиться к стору (connect) и вытащить нужные данные через mapStateToProps
    Ответ написан
    8 комментариев