Антон Спирин

В методе render у вас обращение к свойству id несуществующего объекта. Устраняется ошибка следующими способами:
1. Задавать начальные state/props.
2. Делать проверку на существование объекта перед обращением к его свойству.

И из-за этого не работает роутинг.

withRouter(connect(...)(MainLayout));

И зачем нужно писать экшен, если можно напрямую диспатч вызвать без посредников?

Что именно не понятно? Зачем писать функцию? Или почему бы не импортировать store в каждый компонент вручную?
Первое, don't repeat yourself. Второе, сейчас компоненты вообще ничего не знают о store и о месте его хранения, в противном случае будут. Но вам никто не мешает делать как вам удобней.
Исбыточную конструкцию:

dispatch => ({
  onSetScale: (event) => {
    dispatch(setScale(event);
  }
})

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

{
  onSetScale: setScale,
}

Я не передаю actions через connect, а вызываю так:

componentDidMount() {
  this.props.dispatch(action());
}

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

Обращался к API в componentDidMount() и отправлял в стейт

Все правильно.

но это вызывает перерендеринг компонента и в доках считается нежелательно

Покажите где вы это прочитали.

Пример из документации.

Не ясно зачем передавать в props.devices массив массивов, если используется только первый элемент.
Тем не менее решить проблему можно так:

const PrintDevicesTable = props => {
    const devices = props.devices && props.devices[0];
    
    if (!devices || props.isFetching) {
      return <Preloader />;
    } else if (devices && !devices.length && !props.isFetching) {
       return <NoDataPlaceholder />;
    }

    const items = devices.map((item, index) => <li key={index}>{item.ModelAlias}</li>);

    return <ul>{items}</ul>;
};

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

class Grid extends React.Component {
  getContent() {
    const { children } = this.props;

    if (!children) return null;

    return React.Children.map(children, (child, index) => {  // или forEach без return, в зависимости от целей
      const { displayName } = child.type;

      switch (displayName) {
        case 'Column':
          // do something
        default:
          // do something other
      }
    });
  }

  render () {
    return (
      <Wrapper>
       {this.getContent()}
      </Wrapper>
    )
  }
}

reducers/index.js третья строчка. Посмотрите какой экспорт в файле и какой вы делаете импорт.

Сказать, что подход к реализации плохой ничего не сказать. Посмотрите код типового TodoApp и получше изучите документацию.

почитав документацию, я понял что рефы работают только в "классах", и поэтому происодит ошика

Видимо, по-диагонали читали. Нет ref работает не только в "классах".

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

Ошибка:'refInput' of undefined говорит лишь о том, что в вашем рабочем коде метод не привязан к контексту.

В официальном руководстве есть пример.

Lists and keys

<Carousel
  activeIndex={index}
  direction={direction}
  onSelect={this.handleSelect}
>
  {items.map((item, index) => (
    <Carousel.Item key={index}>
      <img width={900} height={500} alt="900x500" src={item.src} />
      <Carousel.Caption>
        <h3>{item.label}</h3>
        <p>{item.caption}</p>
      </Carousel.Caption>
    </Carousel.Item>
  ))}
</Carousel>

Подойдет любой удобный пакет решающий эту задачу. Гуглите i18n.

connect
withRouter
frondloadConnect

Какие могут быть примеры с Redux? Единственный HOC связанный с Redux это connect, возвращающий компонент подписанный на изменения store. Да и тот находится в пакете react-redux.

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

Deprecated же. Используйте react-transition-group

Почему неправильно-то? Главное чтобы при изменении порядка элементов, состояние обновлялось иммутабельно.
А задавать полученное состояние если используете в проекте React версии ниже 16.3 можно примерно так:

const computeDerivedState = props => ({
  someData: props.someData,
});

class Example extends Component {
  state = {
    ...computeDerivedState(this.props),
    someState,
  };
  
  componentWillReceiveProps(nextProps) {
    if (nextProps.someData !== this.props.someData) {
      this.setState(computeDerivedState(nextProps));
    }
  }
}

Если используете в проекте React ˆ16.3, то вместо componentWillReceiveProps и computeDerivedState используйте getDerivedStateFromProps и прочитайте эту статью.

Подход очень плохой. Писать так не надо. Для начала попробуйте изучить код типового Todo List на github и повторите. Думаю, после этого придет понимание почему и чем плох данный подход.
Давать рекомендации по данному куску === переписать весь код с нуля за вас.

Ключевые моменты:
1. Таски должны храниться в родительском компоненте.
2. В Task помимо задачи, надо передавать колбеки на изменение/удаление.
3. Никаких прямых обращений к DOM. Для решения вашей задачи даже без ref можно обойтись. Оперируйте состоянием.

const result = array.reduce((acc, el) => {
  const key = 'Type' + el.type;
  acc[key] = acc[key] ? [...acc[key], el] : [el];

  return acc;
}, {});

И легально ли этим заниматься в редьюсере ? Может быть middleware лучше подойдет для этого?

Легально. Главное придерживаться одного стиля в организации кода, чтобы не было так, что в одном месте данные преобразуются в редьюсере, в другом в middleware.
Помимо этого, под частные потребности компонента данные можно преобразовывать в селекторах, передаваемых в mapStateToProps.

Например так:

hasUnsavedChanges() {
  // валидация данных
}

handleClick = e => {
  const { dataset } = e.target;

  if (this.hasUnsavedChanges()) {
    return this.showWarningPopup();
  }

  return this.changeContent(dataset.action);
};

Смотря как и чем стилизован ваш компонент Link.
Допустим он не стилизован:

class Link = ({ href, children, ...props }) => <a href={href} {...props}>{children}</a>;

StyledComponents использует для стилизации свойство className, так как мы используем rest оператор наш компонент неявно передаст любое свойство элементу a, в том числе и передаваемое библиотекой className. Поэтому стилизовать можно так:

const StyledLink = styled(Link)`
  // some styles
`;

В случае если classNames уже используется компонентом, надо делать конкатенацию.
В случае использования inline стилей, по весу они значимей классов и переопределить стили без использования !important не получится. Тут лучше тогда все свои компоненты на StyledComponents перевести.

Проблема в том, что вы используете и изменяете чужое решение не разобравшись толком, а как оно вообще работает. Как следствие, причину ищите не там. У вас сервер, webpack dev server в вашем случае, обрабатывает только '/'.
Добавьте следующие строки в конфиг:

module.exports = {
  /* ... */
  output: {
     /* ... */
    publicPath: '/'
  },
   /* ... */
  devServer: {
    historyApiFallback: true,
  },
};

Вместо добавления блока devServer можно изменить скрипт start в package.json:

"start": "webpack-dev-server --mode development --open --hot --history-api-fallback",

Документация.

Решение: вешать ref на input поле

Хорошее решение.

ref делать для каждого поля уникальным.

Нет смысла. Используйте один ref в компоненте TextField, в каждом созданном экземпляре компонента он будет уникальным.