Максим

Я так понимаю, нужно коллекцию подписывать на изменение в store. Дробить store на кусочки (кусочек для каждой коллекции) + использовать combineReducers. Бегло посмотрел вот этот материал (на англ.)

Сразу скажу - не использовал MobX, но если вы читаете дальше - значит интересуетесь.
Ответ про плюсы redux для меня лично - в самом конце.
---
До React, писал на angular, и еще раньше на backbone. В ангуляр разработке у меня были места, которые я для себя объяснял: ок, так работает ангуляр (дайджест там, скоуп такой хитрый и т.д.) - факт был в том, что не все было прозрачно для меня лично.

Начал разбираться с React и переписал часть рабочего проекта на React + Flux. В целом понравилось, но немного напрягало копирование однотипного кода. Появился redux, который (это важно) решил мою проблему. Все, тут я сделал остановку. Написал еще пару внутренних проектов - понравилось. Меня не напрягает ничего. Все уместно, код читается хорошо. Если я возвращаюсь к старому проекту - я очень быстро вникаю в "как это работает" и могу приступить к решению задачи.

В процессе работы с Redux - появился Graph QL. Клево! Опять что-то новенькое - начал разбираться, и закрыл - так как быстро въехать не получилось, и попутно мне пришла простая мысль: зачем? Меня устраивает то, как работает связка React + Redux. Поэтому, я не стал вникать в saga, и пока что не хочется вникать в MobX. Возможно, это не правильно, ведь я их даже не смотрел, но свободное время от "вникания в новую технологию" я потратил на "дебри" технологий, которые активно использую.

Поэтому, для себя я решил - в ближайшее время сидеть ровно на стуле, не скакать по технологиям и спокойно делать одно приложение за другим. До тех пор пока не появится какое-то недовольство текущим стэком.

Главные плюсы redux для меня:
+ Если не трогал проект больше месяца - очень легко вспомнить что к чему.
+ Я пишу код. Я не вникаю в новое, я наращиваю знания по "старому" => я пишу быстро
+ Удобно тестировать

Когда использовать:
- когда хотите сделать одностраничное (SPA) приложение с нуля
- когда хотите постепенно перевести старый проект на схему: вьюха (вся страница, или какой-то блок) + API запросы

Когда facebook выкатывает новую версию react, они пишут:
"Мы убрали такую-то штуку... 99% наших тестов прошло успешно, в остальном мы немного подпилили код и вуаля".
То есть, однозначно, с тестами обновиться вам будет проще. Но писать тесты для всего приложения (не своего, да еще и с небольшим опытом) - это объемная и долгая задача.

По сути, если вы оцените время на написание тестов - это будет в худшем случае половина, в лучшем 9/10 общего времени на задачу.

На мой взгялд, если не стоит задачи заработать денег / закрыть критический баг - не стоит вовсе обновляться.

Есть Вредный совет для успокоения души:
Взять проект, создать отдельную ветку, удалить папку node_modules, установить утилиту npm-check-updates и посмотреть для скольких пакетов у вас есть обновления. NCU так же укажет, что "для некоторых пакетов есть новые версии, которые превышают правило в package.json". Если готовы обновить вообще все, используйте ncu -a, а потом npm install. Запускайте приложение и смотрите сколько будет errors/warnings.

Webpack собирает то, что вы подключаете. Есть пара советов:
1. Подключать аккуратно (например, вместоimport _ from lodash, использовать import func_name from lodash/func_name)

Разработчики стараются оптимизировать импорт, поэтому смотрите на подобные возможности у других библиотек (например).

2. Как вы и написали в вопросе - удалить из бандла (конечного файла скриптов) неиспользуемый код. В этом может помочь, например, uglifyJS. Он должен вырезать все неиспользуемое. Точных настроек не приведу (список), но можете взглянуть на этот вопрос

3. Использовать линтер, например eslint.org/. Запустить lint по кодовой базе и удалить все неиспользуемые (но подключенные) модули.

p.s. пока писал ответ на ваш вопрос, наткнулся еще на webpack-bundle-size-analyzer. Сам не использовал, но возможно поможет.

Подскажите, какой фреймворк выбрать для node.js, при условии, что на фронтенде будет React.js ?

Не вижу связи.

А по фреймворкам для сервера на node, я не слышал ничего популярнее express / koa.

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

в redux у вас есть:
store - состояние всего приложения в одном(!) объекте. Для удобства, вы конечно бьете "store" на кусочки и изменяете/обновляете его не целиком, но в конечном счете объект store все равно один.
actions - действия. Все изменения в redux приложении делаются действиями. Например: Действие(тип: ДОБАВИТЬ_ОДИН)
actions creators* - создатели действий. Функции, которые вы можете вызывать, вместо того, чтобы вызвать действие, напрямую. Например:

function add() {
  return { тип: ДОБАВИТЬ_ОДИН }
}

reducer - редьюсер. Функция которая принимает текущий объект store, и возвращает новый (с новыми данными).

Итого: в redux фундаментальных понятий всего три: действие (action), редьюсер (reducer) и состояние (store)

В реакте и того меньше: есть одно понятие - компонент. А уж там, если хочется: умный/тупой компонент, stateless компонент и может быть что-то еще.

p.s. в коде функций присутствует русский язык для наглядности.

p.p.s. туториалы: react для начинающих, создание приложения с использованием redux

$( "input[name='payment_method']" ).on('keyup', function() {
  $(document.body).trigger('update_checkout');
});

p.s. посмотрите разницу между событиями: keyup, keypres и keydown (выберите подходящее)

Начать с unit-тестов для редьюсера и создателей действий. Хорошо описано на 1й странице документации - redux.js.org/docs/recipes/WritingTests.html

По тестированию интерфейса - не силен в этом, но enzym выглядит очень круто, даже лучше чем стандартные реактовские утилиты для тестирования.

Еще недавно вышла Hypernova

P.S. вы бы вопросику еще тэг "react" поставили, было бы больше просмотров. Я и не знал, что есть на тостере тэг redux.

Я правильно понимаю, что у вас есть проект, на котором реакт рендерит лишь некоторые вьюхи? (то есть, только некоторые страницы?)
В таком случае, вы можете сделать отдельные сборки для каждой страницы без использования роутинга вообще. Или, зачем он вам в таком случае?

То есть: есть страница about на реакте, сделайте для нее bundle-about.js, для contacts на реакте - bundle-contacts.js и так далее.

Про директории не в курсе, а в файлах можно не импортировать, для этого нужно использовать webpack-provide-plugin

...
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.ProvidePlugin({
      'React':     'react'
    })
  ],
...

Здесь немного подробнее ( переведу последний пример - как импортировать сразу несколько...)

new webpack.ProvidePlugin({
    '$':          'jquery',
    '_':          'lodash',
    'ReactDOM':   'react-dom',
    'cssModule':  'react-css-modules',
    'Promise':    'bluebird'
  })

Позволит вам не писать в файлах:

import ReactDOM from ‘react-dom’
import _ from 'lodash'
import $ from 'jquery'
import cssModule from 'react-css-modules'