Антон Спирин

Храните все состояние формы в родителе и передавайте ребенку колбек:

class Child extends Component {
  render() {
    const { handleChange } = this.props;

    return (
      <Wrapper>
        <SomeInput onChange={handleChange} /> 
      </Wrapper>
    );
  }
}

примерный код колбека:

handleChange = e => {
  const { name, value } = this.props;

  this.setState({ [name]: value }, this.calculate);
};

Есть два хороших подхода к организации кодовой базы, которые подходят для большинства проектов: File Type First и Feature First:

 
Оба подхода при умелом использовании они отлично масштабируются, поддерживаются и не вызывают проблем при рефакторинге.

Дата мапперы в зависимости от задач можно использовать в редьюсерах, в mapStateToProps и asyncActions. Главное чтобы по проекту все было стандартизировано.
В mapStateToProps пишут преобразования необходимые лишь для одного компонента.

Большое количество бойлерплейта это плата которую вы платите за использование redux. Можно писать все константы и редьюсеры руками, можно использовать библиотеки вроде redux-actions и ей подобные. В первом случае вы получаете плюс к гибкости, читаемости и статическому анализу, во втором меньше кода. Я в большинстве проектов предпочитаю первый вариант. Так же создаю шаблоны файлов в Webstorm для asyncActions, contstraints, редьюсера, страницы, компонента и законнекченого компонента.
В специфичных проектах с множеством CRUD запросов и похожих сущностей есть смысл написать CRUD Boilerpalte.

Ошибка не при отдаче html файла. Он без проблем отдается. Во втором случае проблемы со статикой. express.static это middleware(промежуточное ПО). Express все запросы обрабатывает по-порядку через все middleware пока не найдет подходящий endpoint. В первом случае express.static обрабатывает пути до роутера, перехватывая только запросы за статическими файлами и возвращая файлы в ответ. Во втором случае эти запросы попадают в роутер, который у вас обрабатывает все пути и возвращает index.html. До express.static запросы не доходят и вместо всей статики вы получаете этот файл и парсер JS выдает ошибку.

Простой пример:

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});
app.use(express.static(__dirname + '/public'));
app.get("/about", (req, res) => { /* */}); // ( 1 )
app.get("/home", (req, res) => { /* */});  // ( 2 )
app.get("*", (req, res) => { /* */}); // ( 3 )
app.get("/never", (req, res) => { /* */}); // ( 4 )

Допустим приходит 4 запроса:

GET https://site/public/img/1.png
GET https://site/home
GET https://site/feed
GET https://site/never

Во всех случаях в консоли покажется: Time: <текущее время>
Первый запрос будет перехвачен express.static и не дойдет до роутера.
Второй запрос будет перехвачен эндпоинтом ( 2 ), ( 1 ) будет пропущен так как пути не совпадают.
Третий эндпоинтом ( 3 ), так как он перехватывает абсолютно все запросы которые до него доходят, ( 1 ) и ( 2 ) соответственно пропущены.
Четвертый запрос так же будет перехвачен и обработан эндпоинтом ( 3 )
До эндпоинта ( 4 ) запросы дойти не могут. Его надо поменять местами с ( 3 )

Возможно, в конфиге webpack не прописан public path:

module.exports = {
    ...
    output: {
        publicPath: '/'
    }
}

Правильный путь:
to={`/dictionary/${item.toLowerCase()}`}

{this.props.massMedia.map(item => {
  const type = mediaType.find(el => el.id === item.type);

  return (
    <TableRow key={item.id} directory={item} directory1={type} />
  );
})}

Тыц

react-select
UMD версия

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

import React from 'react';
import { render } from 'react-dom';
import configureStore from './store';

const store = configureStore();

store.dispatch(init());

render(
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>,
  document.getElementById('root')
);

Зачем тянуть библиотеку? Такой простой функционал проще самому реализовать.
Пример.

Речь идет о next.js и next-redux-wrapper? Используйте componentDidMount:

componentDidMount() {
  this.props.store.dispatch(someAction());
}

немного подумав решил заменить конструкцию

Не надо так делать. Никогда не используйте для функций свойства класса, если можно обойтись методом.
Пример:
Array(1000)].map(_ => <SomeComponent />);
Если в компоненте SomeComponent render прописан методом, то для каждого экземпляра он будет вызываться из прототипа. Если же свойством, то вы вместе с экземплярами создадите 1000 копий одной и той же функции.

Потому-что когда вы вызываете метод на объекте:
obj.method(); // вызываем метод
или:
this.method(); // вызываем метод
Ссылка на объект указанная перед точкой будет использована в качестве контекста и будет доступна в функции, через ключевое слово this.

Когда вы передаете метод без вызова:
onClick={obj.method} // не вызываем метод
или:
onClick={this.method} // не вызываем метод
Передается лишь метод, а контекст теряется.

Чтобы не терялся контекст при передаче метода в слушатель, можно использовать функцию bind. На вашем примере:

class MainPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      color: 'red'
    };
    this.changeStylesForCaption = this.changeStylesForCaption.bind(this); // привязываем контекст
  }  
  
  changeStylesForCaption() {
    this.setState({
      color: 'black'
    });
  }

  render() {
    return (
      <h1 onClick={this.changeStylesForCaption} style={{ color: this.state.color }}>gleb</h1>
    );
  }

}

Стрелочные функции контекста не имеют и используют контекст того окружения, где они определены.

Скорей всего ошибка в редьюсере. Передаете в spread оператор null или undefined.
{ ...someValue }

Примерно так это делается без использования redux:

const Example extends Component {
  state = {
    select: 'default value',
  };
  
  postData(data) {
    fetch('api/somePath', {
      method: 'post',
      headers: {
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    }).then(res => res.json())
      .then(data => {
        // do something with data
    });
  }  

  handleChange = e => { /* ... */ };  

  handleSubmit = () => {
    const { select } = this.state;

    this.postData({ select });
  };

  render() {
    return (
      <Form>
        <Select value={this.state.select} onChange={this.handleChange} />
        <Button onClick={this.handleSubmit}>Submit</Button>
      </Form>
    );
  }
}

Если имеется ввиду вызов вне компонентов React или async aciton, то так:
В вашей точке входа:

export const store = configureStore();

// some code

В целевом файле:

import { store } from './index';
import { someAction } from './actions/some';

store.dispatch(someAction());

Но это не очень хорошая практика. Правильней написать asyncAction и вызывать его.

Как работают Thunk?

Вы имели ввиду асинхронные действия и промежуточное ПО redux-thunk?

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

Правильно.

Сам вызов store.dispatch() синхронный. Но если туда передается не объект, а функция такая как addPost, то до редьюсеров она не доходит. Ее перехватывает redux-thunk middleware и выполняет передавая туда dispatch, getStore и опциональный третий аргумент. Ясное дело, что такая функция может быть асинхронной.