Дмитрий

Хотите чуть уникализировать - создайте доп. поле, куда будете писать, например, ip пользователя анонима, или придумайте какой-либо алгоритм, который будет создавать уникальный ключ на основе полученных данных пользователя - его ip, user-agent и другим данным, которые можно выдрать с клиента.
Или, создайте поле с какими-то сгенерированными случайными данными, пишите их в доп.поле и пишите их пользователю в куку, как уникальный идентификатор.
Позже, сможете хоть как-то идентифицировать пользователя по куке, оставлял он ранее комменты или нет.

А вообще, лучше бы убрать эту возможность и повесить хотя бы авторизацию через соц сети.

Создайте пользователя "Аноним" и пусть это будет любой анонимный комментатор.

Интересно в первую очередь сделать это с помощью .map()

Никак. Используйте reduce и по-хорошему объект или Map.

var array = [
  { id: 1 },
  { id: 2 },
];

const obj = array.reduce((acc, el) => (acc[el.id] = el, acc), {});

console.log(obj); // { 1: { id: 1 }, 2: { id: 2 } }
console.log(obj[1]); // { id: 1 }

Уберите id из запроса, autoincrement добавится автоматически

INSERT INTO `product_comments` (`product_slug`, `product_id`, `user_id`, `created_at`, `updated_at`, `content`) VALUES ('крем-для-рук-и-ногтей',1,2,'2019-04-08 13:25:31.000000','2019-04-08 13:25:31.000000','Крем вообще супер.')

На бэкенде: делаете rest-api с помощью Laravel.
На фронтенде: берете реакт + редакс и разрабатываете приложение, которое будет общаться бэком через АПИ.

Ну или так:

{ReactHtmlParser(product[ (hasSalePrice ? 'sale' : 'regular') + '_price' ])}

Инверсией

const hasSalePrice = !(isSingleReady && product.sale_price == 0);

Вторую строку можно сократить так

{ReactHtmlParser(hasSalePrice ? product.sale_price : product.regular_price)}

можно конечно даже так

{ReactHtmlParser(product[hasSalePrice ? 'sale_price' : 'regular_price'])}

но это фу.

почему id undefined?

А вы туда undefined и передаете.

Исправленный вариант:

constructor(props){
  super(props);

  this.postSelectedHandler = this.postSelectedHandler.bind(this, this.props.id);
}

Ссылки по id.

Лучше использовать slug.

Создал rout положил его возле основного rout-а.

Во-первых не rout, а route. Во-вторых не ясно что и где вы создали. Видимо, речь идет о /shop и /shop/:productId?

Но если эту страницу перезагрузить то сам компонент singlrPage отрисовывается но в шапке и в подвале сайта пропадают изображения и фоны.

Вангую проблемы с ссылками на статику. Они у вас скорее всего строятся относительно пути в строке браузера. Просто откройте вкладку network и проверьте. Это, кстати, именно то, что вы должны были сделать в первую очередь.

Возможно мне надо переместить дочерний роут внутрь компонента родительского роута?

Нет. В этом нет никакого смысла. Советую заглянуть в исходные коды компонентов Router, Switch и Route чтобы понимать как это работает.

Нет, возвращает true она только два раза, т.к. условие
start_count < per_page
выполняется 2 раза, т.к. per_page = 3, а start_count увеличивается с каждой итерацией.

В чем моя ошибка?

Вы изобретаете Array.slice:

function getPaginatedProducts(products, page) {
    const productsPerPage = 3;
    const begin = page * productsPerPage;
    const end = begin + productsPerPage;
    
    return products.slice(begin, end);
}

console.log(getPaginatedProducts(products, 0)); // 1,2,3
console.log(getPaginatedProducts(products, 1)); // 4,5,6
console.log(getPaginatedProducts(products, 2)); // 7,8,9

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

1. Нет необходимости оборачивать Main в Route. Достаточно:

ReactDOM.render((
  <Provider store={store}>
    <Router>
      <Main />
    </Router>
  </Provider>
), document.getElementById('root'));

2. Проверьте код своего сервера. Скорей всего он отдает страницу с приложением только по корневому пути '/'. Если это так, то замените на '*'.

У вас пока не пришел ответ от сервера - нет никаких категорий. Передается undefined.
Одно из многочисленных решений проблемы:

{isFetching ? <Preloader /> : this.renderContent()}

где renderContent метод отрисовывающий зависимый от данных контент вашей страницы.
Вы передаете в компонент Recommended ключ isReady(обратный isFetching), который не используете.
{isReady ? this.renderContent() : <Preloader />}

Еще по-хорошему у данных должно быть начальное состояние. В случае категорий - пустой массив.

Не ясно почему вы делаете запрос в нерекомендованном к использованию методе componentWillMount, а не используете middleware вроде redux-thunk.

Добавлять ключу элемента списка префикс 'category-key-' - бессмысленно.

Обращения вроде catItem['category_name'] так же выглядят странно.

Код:

const mapDispatchToProps = dispatch => ({
    setProducts: products => dispatch(setProducts(products)),
    setFilter:   filter   => dispatch(setFilter(filter)),
});

можно сократить до:

const mapDispatchToProps = {
  setProducts,
  setFilter,
};

Еще, лучше используйте отступ в два пробела вместо четырех. Читать код будет гораздо приятней.

В файле 'actions/filter.js' нет экспорта по-умолчанию.
Исправить можно так:
import { setFilter } from "../actions/filter";

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

const myObj = [
{object_id: 2, category_id: 2},
{object_id: 3, category_id: 2},
{object_id: 4, category_id: 1},
{object_id: 4, category_id: 2},
{object_id: 5, category_id: 1},
{object_id: 5, category_id: 2},
{object_id: 12, category_id: 1},
{object_id: 11, category_id: 1},
{object_id: 13, category_id: 1},
{object_id: 10, category_id: 1},
{object_id: 7, category_id: 3},
{object_id: 6, category_id: 3},
{object_id: 8, category_id: 3},
];

Вообще решение может выглядеть так:

const myArr = [
{object_id: 2, category_id: 2},
{object_id: 3, category_id: 2},
{object_id: 4, category_id: 1},
{object_id: 4, category_id: 2},
{object_id: 5, category_id: 1},
{object_id: 5, category_id: 2},
{object_id: 12, category_id: 1},
{object_id: 11, category_id: 1},
{object_id: 13, category_id: 1},
{object_id: 10, category_id: 1},
{object_id: 7, category_id: 3},
{object_id: 6, category_id: 3},
{object_id: 8, category_id: 3},
];

var filtered = {};

function getObj (arr, cat_id) {
	filtered[cat_id + ''] = [];
	arr.forEach((item, i) => {
		item['category_id'] == cat_id ? filtered[cat_id + ''].push(item['object_id']) : '';
	})
}

getObj(myArr, 1);

console.log(filtered);  // 1: [4,5,12,11,13,10]