Дмитрий

По-хорошему компонент breadcrumbs должен получать массив элементов вида:

const breadCrumbsItems = [
  {
    title: 'Home',
    path: '/',
  },
   {
    title: 'Products',
    path: '/products',
  },
  {
    title: 'Iphone 6s Black',
  },
];

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

Весь интерфейс:
<BreadCrumbs items={breadCrumbsItems} />
c отрисовкой массива элементов с помощью map:

<Wrapper>
  {items.map((item, i) => (
    <BreadCrumbsItem
      key={item.path}
      active={i === items.length - 1}
      path={item.path}
    >
      {item.title}
    </BreadCrumbsItem>
  )}
</Wrapper>

или:

<BreadCrumbs>
  <BreadCrumbs.Item path="/">Home</BreadCrumbs.Item>
  <BreadCrumbs.Item path="/products">Products</BreadCrumbs.Item>
  <BreadCrumbs.Item active>Iphone 6S Black</BreadCrumbs.Item>
</BreadCrumbs>

Чтобы взаимодействовать вам нужно написать rest-full методы, либо использовать другую из популярных технологий, например GraphQL.

Можете попробовать для этих целей nodejs framework express.

Вам нужно реализовать мартшрут на сервере, пример:

app.get('/get-data', function (req, res) {
 // запрос к базе
// нормализовать данные в нужный вам вид (json).
  res.send(данные);
});
// по маршруту /get-data вы получите данные из базы

https://expressjs.com/ru/guide/routing.html

Композиция и инверсия зависимостей:

class SomePage extends React.Component {
  componentDidMound() {
    this.props.fetchSomeData();
  }

  handleSomeEvent = () => {
    doSomething();
  };

  render() {
    const { data } = this.props;

    return <SomeCommonComponent data={data} onSomeEvent={this.handleSomeEvent} />;
  }
}

class SomeOtherPage extends React.Component {
  componentDidMound() {
    this.props.fetchSomeOtherData();
  }

  handleSomeEvent = () => {
    doSomethingOther();
  };

  render() {
    const { data } = this.props;

    return <SomeCommonComponent data={data} onSomeEvent={this.handleSomeEvent} />;
  }
}

let attachment, date, time;

if (hasAttachments) {
  const attachmentsList = attachments.filter(a => a.use_as_featured === 1 );
  attachment = attachmentsList[0];
  const dateTime = attachment['updated_at'].split(' ', 2);
  date = dateTime[0];
  time = dateTime[1];
}

Для записи начальных данных используются сидеры .
Для дат можно использовать :

Schema::create('stocks', function (Blueprint $table) {
            $table->engine = 'InnoDB';

            $table->increments('id');
            $table->string('title');
            $table->text('content');
            $table->dateTime('date')->default(DB::raw('CURRENT_TIMESTAMP'));
        });

Ну сам кейс довольно редкий. У вас же есть эта подсказка и ошибка маловероятна. Если по переходу на страницу подсказки, обновлять ключ в componentDidMount при запросе, то в случае ошибки на главной, пользователи по идее не должны ничего заметить.

Тем не менее, вы можете хранить ошибки по ключу:

const initialState = {
  tip: null,
  isFetching: false,
  errors: {},
};

case FETCH_VIDEO_TIP_FAILED:
  return {
    ...state,
    isFetching: false,
    errors {
      [payload.slug]: payload.error,
    },
  };

mapStateToProps для отдельной страницы:

const mapStateToProps = (state, ownProps) => ({
  error: state.videotips.errors[ownProps.match.params.slug],
});

mapStateToProps для главной:

const mapStateToProps = (state) => ({
  error: state.videotips.errors.homepage,
});

Почему jQuery не находит елемент в componentDidMount()

Потому что в момент вызова вы показываете Preloader или null.

Не стоит использовать JQuery в React разработке.

Можно и так, можно и в reducer, или actions. Действия с данными делать надо там где это уместно, а уместность зависит от того что именно вы делаете.

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

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

case ADD_PRODUCT_COMMENT:
  return {
    ...state,
    comments: {
      ...state.comments,
      allComments: [
        ...state.comments.allComments,
        action.payload,
      ],
     },
  };

Главная проблема вашей логики в том, что вы используете два источника правды для одних и тех же данных: локальное состояние и хранилище redux. Непонятно зачем вы вообще храните эти данные в локальном состоянии компонента.

По-хорошему, ваш запрос за комментариями надо вынести в асинхронное действие, а данные прокидывать в компонент из store вызовом connect.

class Example extends React.Component {
  componentDidMount() {
    const { fetchComments, productSlug } = this.props;
    fetchProductCommentsBySlug(productSlug);
  }

  handleRemoveComment = id => {
    this.props.removeProductCommentById(id); 
  };

  handleSubmitComment = e => {
    // ...
    this.props.postProductComment(productComment);
  };
  
  render() {
    const { comments, users } = this.props;
    // ...
  }
}

const mapStateToProps = state => ({
  users: usersSelector(state),
  comments: commentsSelector(state),
});

const mapDispatchToProps = {
  fetchProductCommentsBySlug,
  removeProductCommentById,
  postProductComment,
};

connect(mapStateToProps, mapDispatchToProps)(Example);

Пустой JSON - самый корректный вариант. Отсутствие элементов не является исключением. У меня во всех проектах используется унифицированный формат ответа:

{
    "status": "success",
    "response": []
}

Так что просто будет пустой массив. Вам рекомендовал бы тоже прийти к формату наподобие вышеизложенного.

Так будет лучше:

function fetchProductBySlug(slug) {
  return async dispatch => {
    dispatch({ type: FETCH_PRODUCT_BY_SLUG });
    try {
      const { data } = await axios.get(`/products/${slug}`);
      dispatch({ type: FETCH_PRODUCT_BY_SLUG_SUCCEEDED, payload: data });
    } catch (err) {
      dispatch({ type: FETCH_PRODUCT_BY_SLUG_FAILED, payload: mapAxiosError(err) });
    }
  }; 
}

export default function product(state = initialState, action) { 
  switch(action.type) {
    case FETCH_PRODUCT_BY_SLUG:
      return {
        ...state,
        isFetching: true,
        error: null,
      };

    case FETCH_PRODUCT_BY_SLUG_SUCCEEDED:
      return {
        ...state,
        product: action.payload,
        isFetching: false,
        error: null,
      };

    case FETCH_PRODUCT_BY_SLUG_FAILED:
      return {
        ...state,
        isFetching: false,
        error: action.payload,
      };

    default:
      return state;
  }
}

вам поможет https://reactjs.org/docs/react-component.html#stat...
но на самом деле вам нужно использовать props напрямую, в state хранить только то что может поменяться в процессе работы самого компонента при неизменных пропсах

Лучше этого не делать, в redux рекомендуется передавать данные которые переиспользуются в других компонентах, для форм это как правило не требуется.
Ну а если очень хочется то создай сущность form в redux и диспатч туда все изменения, также как ты делаешь через setState при change инпутов.

1. Используйте const вместо let для определения переменных которые не переопределяются в коде. Это помогает снизить когнитивную нагрузку с человека читающего код и негласный стандарт в React разработке.

2. Такие вещи как globalStyles и конфигурацию store лучше вынести в отдельные файлы. Они могут со временем хорошо разрастись.
По поводу globalStyles, вы вообще можете вынести их в отдельный css файл.

3. Вместо:

{
  isModal
  ? <Route path="/auth" component={AuthPopup} />
  : null
}

лучше:

{isModal && <Route path="/auth" component={AuthPopup} />}

4. Вместо:

function mapDispatchToProps(dispatch) {
    return {
        autoLogin: () => dispatch(autoLogin()),
        getBrowser: () => dispatch(getBrowser()),
        getMedia: () => dispatch(getMedia())
    }
}

лучше:

const mapDispatchToProps = {
  autoLogin,
  getBrowser,
  getMedia,
};

5. Точки с запятыми в конце то есть, то нет. Определитесь и приведите код к одному виду.

6.

& label {}
& input {}
& span {}

Это не очень хороший подход. Во-первых ваши стили не изолированные, что может приводить к неожиданным результатам. Во-вторых у вас очень много дублирования стилей. Определите Input и Label как базовые компоненты и используйте в разных местах, то же с остальным если есть.

7. Почему папка со страницами называется Containers? Дань бойлерплейтам?

8. Использование trailing comma является хорошей практикой.

9.

import {combineReducers} from 'redux';
import photoReducer from './photoReducer';
import authReducer from './authReducer';
import globalReducer from './globalReducer';

export default combineReducers({
    photoReducer, authReducer, globalReducer
})

Все таки приятней работать с хранилищем в котором ключи не имеют в названии слова reducer:

import {combineReducers} from 'redux';
import photo from './photoReducer';
import auth from './authReducer';
import global from './globalReducer';

export default combineReducers({
  photo, 
  auth,
  global,
});

10. Забудьте вообще, что в языке есть возможность использовать вложенный тернарный оператор:

return e === 'invalid-email' ? 'Неверно указан e-mail'
    : e === 'user-not-found' ? 'Указанный e-mail на найден'
    : e === 'wrong-password' ? 'Неверный пароль'
    : e === 'email-already-in-use' ? 'Указанный e-mail уже используется'
    : e === 'network-request-failed' ? 'Нет подключения к интернету'
    : e === 'operation-not-allowed' ? 'Произошла ошибка, попробуйте снова'
    : e === 'popup-closed-by-user' ? 'Окно авторизации закрыто пользователем'
    : e === 'account-exists-with-different-credential' ? 'Аккаунт уже существует с другими данными, используйте другой способ авторизации'
    : e

Это одна из самых худших практик в JavaScript разработке. Тут лучше подойдет конструкция switch case

11. Константы actionTypes лучше вынести в папку constants и разложить по разным файлам, иначе со временем у вас там будет свалка.

12. Вместо:

import {SET_ACTIVE, CHANGE_VALUE, SET_DEFAULT, UPLOAD, UPDATE_IMAGE, SET_IMAGE_ERROR, SET_LIKE, SET_COMMENT, ADD_ARTICLE_SUCCESS, FETCH_ARTICLES_START, FETCH_ARTICLES_SUCCESS, FETCH_ARTICLES_ERROR} from '../actions/actionTypes';

Лучше:

import {
  SET_ACTIVE,
  CHANGE_VALUE,
  SET_DEFAULT, UPLOAD,  
  UPDATE_IMAGE,
  SET_IMAGE_ERROR,
  SET_LIKE,
  SET_COMMENT,
  ADD_ARTICLE_SUCCESS,
  FETCH_ARTICLES_START,
  FETCH_ARTICLES_SUCCESS,
  FETCH_ARTICLES_ERROR,
} from '../actions/actionTypes';

13. Попробуйте внедрить библиотеку reselect. И для получения значения из store вместо записи вида:

function mapStateToProps(state) {
    return {
        browser: state.globalReducer.browser
    }
}

использовать селектор:

const mapStateToProps = state => ({
  browser: browserSelector(state),
});

Почему dispatch не срабатывает?

Потому что вы его не вызываете.

Замените строку:
setProductComments(/* ... */);
на:
this.props.setProductComments(/* ... */);
или на:

this.props.dispatch(setProductComments(/* ... */));

Чтобы первый вариант работал, измените mapDispatchToProps:

const mapDispatchToProps = {
  setProductComments,
};

Еще вы импортируете в actions и reducer типы действий, но пишите в type строки хардкодом. Не надо так.
Запросы к API принято выносить в async actions.

Корректно - получать его через last insert id. Вот примеры употребления в Laravel: https://laravelcode.com/post/laravel-55-get-last-i...
В случае с Eloquent - ничего руками делать не надо, он сам в методе save подставляет в поле id последний вставленный id'шник, достаточно после этого просто прочитать его в $comment->id или вообще не читать, если с ним отдельно ничего делать не нужно.

https://laravel.com/docs/5.6/eloquent#mass-assignment