Антон Спирин

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

anyData.map((data) => { /* тело функции */ });
anyData.map((data) => возвращаемое_значение);
anyData.map((data) => ( /* возвращаемое значение */ ));

Скобки чаще всего используют, чтобы вернуть литерал объекта в короткой записи:
anyData.map((data) => ({ x: 1 }));
Без скобок парсер примет литерал объекта за тело функции.

В скобках можно использовать запятую, порой удобно для быстрого дебага:

// было
anyData.map((a, b) =>  a + b);
// приспичило вывести значения в консоль.
anyData.map((a, b) => (console.log(a, b), a + b));

Выполнятся все вызовы и выражения перечисленные через запятую, в нашем случае вывод в консоль, и вернется последнее значение, в нашем случае a + b.

const values = ['111', '222', '333'];
const result = values.map(name => ({ name }));

Autoplay Policy Changes

parent.contains(child);

Демо.

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

Мнение программистов Яндекс на этот счет.

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

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. В больших проектах это экономит кучу времени.

var curentSliderWorkersVal = document.getElementById('slideWorkers').value;
var workerPrice = 0, worker_one_price = 500;

if (curentSliderWorkersVal > 3) {
  workerPrice = (curentSliderWorkersVal - 3) * 500;
}

Почему функция возвращает undifinded?

Потому что функция f синхронно отрабатывает и не возвращает никакого результата.

Как вернуть результат из setInterval?

Можно захардкодить, можно использовать колбек или Promise.
Хардкод:

function f() { 
  setTimeout(console.log, 500, 1);
}

f(); // 1

Колбек:

function f(cb) { 
  setTimeout(cb, 500, 1);
}

f(console.log); // 1

Promise:

function f() {
  return new Promise(resolve => {
    setTimeout(resolve, 500, 1);
  });
}

f().then(console.log); // 1

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

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

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

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

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

var response;

try {
  response = JSON.parse(msg);
} catch (e) {
  // handle error
}

if (Array.isArray(response)) {

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