Егор Живагин

Вы можете повесить слушатель onError на img, он срабатывает в случае любой ошибки при загрузке. Нужно будет посмотреть на объект ошибки, по нему как-то понять, что это именно 404 и передать в src этой же картинки ссылку на картинку по умолчанию

Вы же слышали про shouldComponentUpdate ?) Просто добавьте его к вашим item-компонентам
Или React.memo для функциональных компонентов

Но вообще, если у вас компоненты в цикле выводятся, а не просто div-блоки, то при тех же пропсах ререндера не будет. Просто это не в map нужно в консоли проверять, а внутри самого компонента-item. map в любом случае обязан перебрать все элементы

Потому что вы никуда не передали onChange?

Не очень понял. Запрос делается, когда требуется)

Представим случай:
У вас в одном компоненте есть список продуктов, который вы загружаете запросом к беку, А в другом компоненте есть надпись "найдено 1234 продуктов". Они на одной странице, но находятся далеко друг от друга, поэтому это разные компоненты

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

React без редакса: найти/сделать какой-то родительский компонент, который будет "над" вашими двумя. В нём делать запрос, результат запроса прокидывать в нужные компоненты через пропсы. Есть очевидный минус: бывает, что между родительским компонентом и нужным компонентом есть ещё компонентов 5-6. Придётся прокидывать пропсы через каждый. Это захламляет проект. А если вам вдруг ещё в какой-то третий компонент нужно будет эти же данные прокинуть -- придётся переделывать

React + redux (или любой другой стейт менеджер, не обязательно redux):
В любом компоненте вызываете action, который делает запрос и сохраняет результат в store. Если какому-то компоненту нужны эти данные -- он делает connect к стору, берёт оттуда нужные данные и всё.

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

Компонент должен ререндериться автоматически. Если нет -- видимо, у вас state.asideReducer.cart не изменяется, а мутирует. В таком случае, даже если в объекте изменились данные, ссылка на объект остаётся та же, редакс не видит изменения и не перерисовывает компонент
Короче, покажите ваш редьюсер)

а, я наконец понял, что именно вы хотите сделать. Функции нельзя передать в children, получите ошибку Functions are not valid as a React child. Тут два варианта:
1 - Передавать в children компонент, как в первом примере
2 - Уйти от children в пользу передачи контента через функцию

Условно

class App extends Component {
  render() {
    const renderContent = params => { params.todos ? <h2>UserProfile</h2> : <div>Loading...</div> }

    return (
      <div className="App">
        <Twitter username='user1' renderContent={ renderContent } />
      </div>
    );
  }
}

Ну, и класс Twitter немножко дописать, в таком варианте он должен рендерить результат renderContent(this.state) , а не children

Edit: первый ответ был не верный, обновил

Блин, я даже не знаю, что сказать... Давайте по-порядку
1) По каким материалам вы учите? Они точно не устарели? Меня очень смущает ваш constructor, потому что пропсы и так автоматически записываются в this.props. Получается, что вместо всего метода можно написать просто

class Interface extends React.Component{
  elements = null;
...
}

2) Тут я могу быть не прав, но, насколько я помню React.createRef можно использовать только внутри классового компонента. Функция mapStateToProps никак не связана с вашим классом Interface, у неё совсем другой контекст

3) Теперь непосредственно о вашей проблеме. Редьюсер, в котором находится switch/case никак не связан с вашим классом Interface. Советую ещё раз перечитать в документации как работает this. У вас он указывает на функцию, в которой вы к нему обращаетесь. Не могу подсказать точнее, потому что меня немного вводит в ступор строка dispatch(action){

Могу сказать только три вещи:
- Никогда не обновляйте стейт вот так: this.state.SOME_FIELD = ... . Используйте для этого только this.setState({ SOME_FIELD: ... }) . Иначе компонент может не отрисовать новые данные
- Редьюсер и redux никак не связаны со стейтом и вашими классами. У них абсолютно разный контекст выполнения. this в Реакте работает точно так же, как и должен работать в JS-e
- Очень советую пройти официальный туториал по реакту - ссылка

Проблема в том, что вы вызываете функцию стандартным способом. Она возвращает вам вторую функцию (со вторым debugger), которую вы нигде не вызываете. Таким способом и не сможете, так как вам нужно как-то прокинуть в неё dispatch.

Вы должны сделать connect (из react-redux) компонента App, примерно так:

import { connect } from 'react-redux';
// ...
const mapDispatchToProps = {
  callInitTodosThunk: initTodosThunk
}
// ...
function App(props) {
  const { initTodosThunk } = props
  callInitTodosThunk();

  return (
        <Header/>
  );
}

export default connect(null, mapDispatchToProps)(App);

Либо использовать хук useDispatch, об этом способе можете погуглить

Абсолютно нормально

Есть два варианта:

1 -- Гуглить, как делается SSR , чтобы рендерить страницу на сервере и отдавать в res.send уже готовую, полностью построенную страницу

2 -- Просто воспользоваться res.sendFile('FILENAME') и отдать пустую страницу со скриптами (как раз ваш index.html), тогда реакт построит приложение уже на клиенте. Дока res.sendFile - тут