Антон Спирин

Не находите странным, что компонент у вас называется ProductDetailContainer, при этом вы делаете запрос по id, но пишите полученные данные в редьюсер для списка, заменяя массив объектом и переписывая ключи состояния списка?
Ошибка с map как раз из-за того, что вы массив объектом подменяете.
Вы неправильно спроектировали хранилище и пытаетесь использовать одни и те же ключи для разных целей.

И кто вас научил таким бессмысленным кульбитам вроде dispatchGetProductDetailWired? Так, видимо, до выхода react-redux делали.
Ваш action можно сократить до:

export const getProductDetail = id => async dispatch => {
  try {
    dispatch(fetching());
    const data = await ProductsService.getProductById(id);
    dispatch(receiveData(data));
  } catch (error) {
     dispatch(fetchingError(error);
  }
};

В компоненте:

class ProductDetailContainer extends Component {
  componentWillMount() {
    const { match: { params: { id } }, getProductDetail } = this.props;

    getProductDetail(id);
  }
  /* ... */
}

const mapStateToProps = state => ({
  productDetail: state.products,
});

const matchDispatchToProps = {
  getProductDetail,
}

export default connect(mapStateToProps, matchDispatchToProps)(ProductDetailContainer);

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

Перерисовка наступает тогда когда вы обновляете store. Ничего удивительного.

Если так хотите оставить и использовать свой подход. У вас есть два пути:
1. Добавить в store ключ isAllDataLoaded и обновлять его в редьюсере когда приходит последняя часть данных.
2. Добавить в проект redux-thunk. Переписать свою функцию в async action:

const fetchData = () => async dispatch => {
  const data = [];
  try {
    while(true) {
      const response = await Api.getSomeData({ from: data.length });
      data.push(response.item); // если item это массив, то data.push(...response.item); 
      if(!response.items.length) {
        break;
      }
    }
    
    dispatch(fetchDataSuccess(data));
    
    return data;
  } catch (e) {
    dispatch(fetchDataFail(e));
  }
};

Еще учитесь писать поддерживаемый и читаемых код. Соблюдайте стандарты комьюнити, такие запросы, при использовании redux, принято выносить в async action или сагу.

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

В React есть два способа написать компонент.
1. class component - класс наследующий React.Component и обязательно реализующий метод render:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

2. functional component - функция возвращающая JSX:

const Welcome ({ name }) => <h1>Hello, {name}</h1>;

class в контексте class component является прилагательным, характеризующим тип компонента.

Вы имеете ввиду create-react-app? Вам так и так придется изучать саму библиотеку Reaсt.
create-react-app это лишь утилита для создания приложений с базовой структурой, которая устанавливает все нужные зависимости и добавляет в package.json скрипты для запуска тестов и сборки приложения.
Если плохо понимаете документацию, ищите в интернете статьи с примерами.

Это объект или функция передаваемая в connect вторым аргументом.
Если вы передаете в connect вторым аргументом объект с AC, то connect оборачивает ваши AC в функцию-обертку () => store.dispatch(AC) и передаёт в props компонента. Если передаете вторым аргументом функцию, connect выполняет ее, передавая на вход первым аргуменом store.dispatch, вторым props компонента, и передаёт в props компонента результат выполнения. Все.

Потому что вы передаете в this.setState тот же массив.
Обновляйте так:

addGroup = () => {
  this.setState(prevState => ({ items : [ ...prevState.items, undefined ] }));
};

И уберите bind из render. В моем примере class field arrow function, ее биндить не надо.

Метод shouldComponentUpdate можно изменить так:

shouldComponentUpdate( nextProps, nextState ) {
   return nextState.items !== this.state.Items;
}

Если такой проверки мало, можно изменить так:

shouldComponentUpdate( nextProps, nextState ) {
   return nextState.items !== this.state.Items &&
     JSON.stringify(nextState.items.sort()) !== JSON.stringify(this.state.items.sort());
}

Если массив заменен, то пройдет приведение к строке и сравнение строк и если массивы разные вернется true и компонент обновится. Можно для сравнения использовать _.isEqual().
Но в большинстве случаев достаточно первого варианта с неглубоким сравнением.

Хорошее руководство: Introduction to React with Redux and Redux Thunk
redux-thunk

add = () => {
  fetch('/users/', { method: 'POST' })
    .then(res => res.json())
    .then(count => this.setState({ count }));
};

В реальных проектах обычно используют REST API.
Для вашего приложения хватит и local storage.
Можете использовать firebase.
На крайняк можно использовать REST API плагин для WP.
Можете попробовать написать простой REST API сервер на Epress/Koa или на любом ЯП, подходящем для этой задачи.

Библиотека позволяющая использовать маршрутизацию на стороне клиента. Если в вашем приложении подразумевается переход по страницам приложения с подменой url в браузере и без перезагрузки страницы(SPA), то да, клиентский роутинг вам необходим. Можете использовать react-router-dom, а можете и свой роутер написать. Первый вариант сэкономит вам кучу времени, удобен в использовании и вы всегда сможете найти в интернете типовые решения большинства задач. Второй вариант годится разве для саморазвития.

Не правильно используете Fetch API.
Простой пример использования:

fetch('https://example.com/api')
  .then(response => response.json())
  .then(json => dispatch(someAction(json)))
  .catch(console.log);

class App extends React.Component {
  state = {
    category: 'business',
    items: [],
  };

  componentDidMount() {
    this.fetchData();
  }
  
  fetchData() {
    axios.get('https://newsapi.org/v2/top-headlines?country=us&category='+this.state.category)
      .then(res => {
      this.setState({ items: res.data.articles });
    });
  }
  
  changeCategory = () => {
    this.setState(
      { category: 'entertainment' },
      this.fetchData,
    );
  };


  render() {
    return (
      <div className='wrapper'>
        <button onClick={this.changeCategory}>CLICK</button>
      </div>
    );
  }
}

В конце текста ошибки ссылка с ответом на ваш вопрос.

Еще почитать: Тыц, тыц

У вас у корневого маршрута стоит свойство exact, это значит, что переход на него будет только при точном совпадении пути с /. По пути /rigs компонент Main отрендерен не будет.
Решить проблему можно так:

<Switch>
  <Route path="/auth" component={Auth} />
  <Route path="/" component={Main} />
</Switch>

Хорошо знать, что они есть и какие задачи решают. Стоит понимать, что JavaScript и, в частности, код React приложения, сильно далек от классического ООП и во многих классических паттернах тут нет необходимости. А что-то уже реализовано в браузерных API и библиотеках которые вы используете.
В JavaScript и в React разработке используются свои паттерны и приемы. Просто вбейте в поисковике React patterns . Так же хорошо знать что такое принципы SOLID, DRY и прочее.

Можно использовать react-bootstrap.github.io

Как альтернатива, отказ от БЭМ и переход на css in js.
Сам в работе использую и рекомендую Styled Components

{radios.map(radio => (
  <Radio
    key={radio.value}
    enabled={radio.value === this.state.value} 
  >
    {radio.label}
  </Radio>
))}

Активный элемент не обязательно хранится в state, может приходить и в props

Зачем делать двойную работу? Пишите сразу.

Вы пытаетесь отрендерить объект состояния и ловите исключение.
У вас в свойство count передается объект:

{
  counterReducer: 0,
}

Исправьте mapSateToProps на:

function mapStateToProps(state) {
    return {
        count: state.counterReducer,
    };
}

или:

const mapStateToProps = state => ({
  count: state.counterReducer,
});