Максим

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

В реальном приложении еще запрос улетает на сервер, что клиент такой-то отметил такой-то объект в избранное.

Нужно использовать метод populate

Документация - отличный вариант.
Так же, быстро выучить основы реакт можно по этому туториалу (ру текст)

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

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

google по поводу деплоя на heroku

Попробуйте решить эти тестовые задания

Три популярнейших продукта: Angular / Vue / React.
Покрытие всех фронтовых задач 100%

p.s. ключевые слова в экосистеме: react, redux/mobx, react ui (гугл), react-router / reach-router, flow ;)

Возьмите этот туториал и пройдите его. Там по ходу пьесы есть ссылки на MDN / Learn.javascript.ru

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

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

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

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

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

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

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

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

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

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

p.s. неплохая статья на EN - https://medium.com/@alexandereardon/dragging-react...

Это можно сделать с помощью 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

Нужно разобраться в причине появления этой ошибки.
Суть ее в том, что у вас 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
  }