Антон Спирин

1. formatTime - хелпер, я не буду таратить время на анализ качества его реализации, скажу лишь, что в компоненте ему не место. Перенесите в папку lib, utils или как там она у вас называется, импортируйте где нужен и используйте.

2. Закроем, пока глаза на пункт 1. formatTime у вас написан стрелочной функцией, но он никуда не передается и в нем не используется ключевое слово this - определять его стрелочной функцией было бессмысленно. Изучите вопрос и постарайтесь понять зачем их используют.

То же с getChatsUser - функция никуда не передается.

3. Никогда не используйте тернарки если, альтернативный кейс null. Замените на:

render() {
  /* ... */
  const hasUnreadMessages = unread_amount > 0;
  
  return (
    <div>
      {hasUnreadMessages && (
        <div className="unread-message-container">{unread_amount}</div>
      )}
    </div>
  );
}

4. Зачем передаете в mapStateToProps все состояние редьюсера? Передавайте только необходимые компоненту данные:

export const userDataSelector = state => state.chatReducer.userData;

const mapStateToProps = state => ({
  userData: userDataSelector(state),
});

Селекторы очень полезная вещь. В реальных приложениях они часто помногу раз переиспользуются и в случае изменения структуры store, вам придется изменить только селекторы, вместо изменения реализаций mapStateToProps по всему приложению. Так же, они, зачастую, короче.

Почитайте про библиотеку reselect.

5. Вместо:

const query = Object.assign({}, params, { per_page });

лаконичней и проще для анализа:
const query = { ...params, per_page };

6. Правильное обновление состояния на основе предыдущего:

this.setState(prevState => ({
  per_page: prevState.per_page + 5,
}));

7. Использование trailing comma - очень хорошая практика, советую ей не пренебрегать.

8. Более оптимизированным вариантом для списков, будет вместо определения стрелочных функции в элементах каждый render:
<div onClick={() => setUserForChat(userData)}>
использовать data-атрибуты:

<div data-id={userData.id} onClick={setUserForChat}>

Реализацию setUserForChat придется изменить:

setUserForChat = e => {
  const { id } = e.target.dataset;
  // some code with using id
}

Я так пишу:

import * as React from 'react';
import { connect, DispatchProp } from 'react-redux';
import { connectedPropSelector } from './selectors';

interface OwnProps {
  ownProp: string,
}

interface ConnectedProps {
  connectedProp: string,
}

type Props = OwnProps & ConnectedProps & DispatchProp<any>;

interface State {
  someKey: string,
}

class Example extends React.Component<Props, State> {
  state = {
    someKey: 'someValue',
  };
  
  render() {
    const { ownProp, connectedProp } = this.props;

    return ( /* ... */ );
  }
}

const mapStateToProps = state => ({
  connectedProp: connectedPropSelector(state),
});

export default connect(mapStateToProps)(Example);

Официальная документация

const AnswerItem = ({ onAnswerClick, answer: { id, text } }) => ...

Но лучше проверять существование объекта answer, если конечно не уверены точно, что он будет передан в любом случае.

Почитайте любую тематическую статью на эту тему.
1. В самом простом случае у вас две точки входа server(с ReactDOMServer.renderToString) и client(c ReactDOM.hydrate).

2. State можно получать на сервере и передавать на клиент, примерно, так:

<script>window.__INITIAL_STATE__ = json.stringify(initialState);</ script>

В configureStore:

export = function (initialState: {} = {}) {
  if (__CLIENT__) {
    initialState = JSON.parse(JSON.stringify(window.__INITIAL_STATE__));
  }

  return createStore(combineReducers({ ...rootReducer }), initialState, enhancer);
}

3. Никаких глобальных переменных для состояний изменяющихся от клиента к клиенту(локали, темы и прочее). Node обрабатывает множество запросов одновременно и информация клиентов при передаче конфигураций в глобальные модули или при использовании глобальных состояний может перемешаться.
4. Получение данных на сервере и клиенте тот еще головняк. Посмотрите как реализована библиотека react-frontload.

...но если кладу этот файл в отдельную папку и рядом с файлом создаю файл package.json с таким содержанием...

Зачем?

Срочно изучайте основы npm и wepack.

Если хотите собирать бандл из другой директории измените путь в свойстве entry конфига webpack:

module.exports = {
  entry: './path/to/my/entry/file.js'
};

package.json добавлять не надо, этот файл для других целей.

Вы вы используете в коде неопределенный идентификатор onAjaxSucces и получаете соответствующую ошибку.
Вы должны определить в коде выше функцию onAjaxSucces

function onAjaxSucces(data) {
  // do something with data
} 

$.post(
  "http://www.google-analytics.com/collect",
  {
    v: '1',
    tid: 'UA-xxxxxx-1',
    cid: 'a7a364d8-0d14-4e77-b637-xxxxxxxxxx',
    t: 'item',
    ti: '21001',
    in: 'товар2',
    ip: '300.00',
    iv: 'категория2'
  },
  onAjaxSucces
);

, либо определить анонимную функцию в аргументах:

$.post(
  "http://www.google-analytics.com/collect",
  {
    v: '1',
    tid: 'UA-xxxxxx-1',
    cid: 'a7a364d8-0d14-4e77-b637-xxxxxxxxxx',
    t: 'item',
    ti: '21001',
    in: 'товар2',
    ip: '300.00',
    iv: 'категория2'
  },
  function(data) {
    // do something with data
  }
);

Второй вариант предпочтительнее, если функция не переиспользуется.

$.post так же может принимать аргументом объект с параметрами.

ES5:

$('.num').text(function(_, num) {
  return num * 2;
});

ES6:
$('.num').text((_, num) => num * 2);

Потому что библиотека не ожидает возвращаемое значение в componentWillMount и следом сразу вызывает render.
Забудьте этот метод - он не рекомендован к использованию. Как уже писали выше, асинхронные запросы рекомендуется инициировать в componentDidMount. Он выполняется после вызова render, который вы по какой-то неясной причине хотите избежать.

Вот два варианта решения:
1. До загрузки данных возвращать в render null или прелоадер.

render() {
   const { data } = this.props;

   if (!data) return null;
     
    return (
      <div>
        <FilterModels />
      </div>
    )
  }
}

2. Переместить загрузку данных в родительский компонент и отрисовывать целевой по условию:

render() {
  const { filterData } = this.props;
  return (
    <Wrapper>
      {filterData  && <FilterForm data={filterData} />}
   </Wrapper>
  )
}

Можно сделать так:
1. Метод оnClick передается из родительского компонента.
2. state иконки высчитывается по полученным props, но так же меняется по клику, для более комфортного пользовательского опыта.
3. По возвращению ответа от сервера обновляется вся карточка. Так же, обновляется state иконки в computeDerivedState, мало ли была ошибка и товар не попал в избранное.
4. В случае ошибки, левом нижнем углу экрана можно показать всплывающее уведомление. Для этого можно написать action и вызывать его в блоке catch асинхронных действий.

white-space: pre-line;

Демо.

В обоих случаях, можно еще использовать:
word-break: break-word;

Запись:

state = {
  filteredNews: this.props.data,
};

аналогична:

constructor(props) {
    super(props);
    this.state =  {
      filteredNews: this.props.data,
    };
  }

this.props.data записывается в state единожды в конструкторе. В последствии, при получении нового значения this.props.data, state не изменяется.

Нет никакой необходимости определять renderNews как стрелочную функцию, ее следует переделать в метод класса.

Было:
renderNews = () => {};
стало:
renderNews() {}

Я бы внес в renderNews следующие изменения, помимо переделывания в метод класса:
1. ранний return вместо переменной и блока else,
2. замена обычной функции на стрелочную в колбеке map.

Результат:

renderNews() {
  const { filteredNews } = this.state;

  if (filteredNews.length) {
    return filteredNews.map(item => (
      <Article key={item.id} data={item} />
    ));
  }

  return <p>К сожалению новостей нет</p>;
}

Различия между MVVM и остальными MV*-паттернами

render() {
  const { someStateKey } = this.props;  

  if (!someStateKey) return null;

  return (
    {/* component JSX code */}
  );
}

Нет, это будет двойная работа. В реальном проекте программист:
1. Описывает компонент
2. Пишет JSX разметку в render
3. Стилизует компонент, в зависимости от выбранной технологии
4. Пишет необходимые методы и слушатели

Как правильно верстают контейнер для контента:

.container {
  width: calc(100% - 32px);  // отступ по 16px в случае если страница <= 1024px
  max-width: 1024px;  // размер для примера
  margin: 0 auto;
}

max-width можно задать 100% и напрямую задать padding, само собой к ширине + 32px

.container {
  width: 100%;
  max-width: 1056px;
  margin: 0 auto;
  padding: 0 16px;
}

Для осуществления подобной деятельности на территории РФ, вы должны быть банком или РНКО, иначе надолго присядите.
Естественно, любая подобная система работает через API.

Через this в литерале объекта(вне тела функции) вы обращаетесь к глобальному контексту - window или undefined в строгом режиме. Демо.
Можно использовать геттер:

var lol = {
  salary: 15,
  bonus: 100,
  gen: 'girl',
  get total() {
     return this.salary + this.bonus;
   }
}

console.log(lol.total);

или метод:

var lol = {
  salary: 15,
  bonus: 100,
  gen: 'girl',
  getTotal() {
     return this.salary + this.bonus;
   }
}

console.log(lol.getTotal());