Ntsh

Можно передавать в connect опцию withRef:

export default connect(mapStateToProps, null, null, { withRef: true })(Component);

Получать ref переданного в connect компонента надо так:
this.someRefName.getWrappedInstance();
где someRefName - это ref полученный от connect.

getWrappedInstance будет доступна для вызова только если вы передадите опцию withRef.

Почему неправильно-то? Главное чтобы при изменении порядка элементов, состояние обновлялось иммутабельно.
А задавать полученное состояние если используете в проекте 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 и прочитайте эту статью.

Видео туториалы от Дэна Абрамова.
Курс от Максим.
React/Redux Links

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

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

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

Правильно.

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

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

export const store = configureStore();

// some code

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

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

store.dispatch(someAction());

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

Потому-что когда вы вызываете метод на объекте:
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>
    );
  }

}

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

Конкретно этот вариант будет делаться следующим образом (в кратце):
1. Извлекутся все анимации из After Effects с помощью bodymovin
2. В проект подключится lottie-web
3. В lottie-web передадутся данные и будет сделана настройка.

В результате получится идентичная анимация на svg, точь в точь как в After Effects, но в браузере.

Почему так сложно? Да потому что вручную ты хрен добьешь такой же точности таймингов и кривых анимаций.

Как сделать Ajax запрос на React js?

Искользовать Middleware. Есть очень простая и популярная библиотека redux-thunk.
Статья на эту тему.