Максим

...
let AppSmallRedux = connect(
    (store) => ({ data: store.reducerAppSmall }), // (1)
    dispatch => ({
        update: () => dispatch({ type: "UPDATE_AppSmall" })
    })
)(AppSmall);
...
let AppRedux = connect(
    (store) => ({ data: store.reducerApp }), // (2)
    dispatch => ({
        update: () => dispatch({ type: "UPDATE_App" })
    })
)(App);
...

В пунктах (1) и (2) вы подписывались на весь STORE, следовательно, если он менялся, то у вас на это реагировали все "приконекченные" компоненты. Если подписываться только на "нужный кусочек стора" - то все будет ок.

Ваш обновленный пример (codepen).

Можете подсказать, как правильно связать вместе эти вещи.

Так же, как и без wordpress'a.
Wordpress не накладывает никаких ограничений. Подключаете на нужной странице скрипт, создаете элемент с id таким-то, в него монтируете реакт-приложение.

class App extends React.Component {
  constructor(){
    super();
    this.state ={
      count: [1,2,3,4,5,6,7,8,9]
    }
  }
  removeCount(idx){ // <= здесь было idk (опечатка)
    let newItems = this.state.count;
    newItems.splice(idx, 1);
    this.setState({count: newItems});
  }
  render() {
    const self = this
    const list = this.state.count.map(function(index, i){
      // здесь у вас был не тот this, так как вы используете обычную функцию, а не стрелочную, "this равный компоненту" теряется, чтобы разобраться можете тут сконослить this и self
      return <div key={i} onClick={self.removeCount.bind(self, i)}><p>{index}</p></div>
    })
    return (
      <div className="row">
       {list}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

Для работы с датами: moment
Для роутинга: react-router
Для крутых таблиц, а так же представления большого количества данных: react-virtualized
Для работы с material ui: material-ui
Модалные окна: react-modal
Удобный дейтпикер: react-bootstrap-datarangepicker
Для google analytics: react-ga
---
Для разработки:
pre-commit - запускать проверки перед коммитом,
eslint - поддерживать единый стиль кода на проекте,
webpack + babel (само собой),
cross-env - забыть про проблемы NODE_PATH под разные операционки,

Если вы на чужом сайте пытаетесь выполнить $ что-то там, то нужно чтобы $ был равен функции jQuery, ведь по сути, $ - это просто имя функции.
Поэтому, для начала, введите в консоли $, должно быть что-то подобное:

А не так:


Окей, допустим jquery подключен и доступен через $, значит далее проверяйте, что доступен этот элемент:
$(".dealbtn-up")
Если доступен и он всего один(!), то едем далее, и проверяем доступна ли функция click (это уже из области фантастики, так как она 100% должна быть доступна, но мало ли что написано другим программистом, главное в этом ответе, для вас - понять последовательность действий).
Выглядит примерно так.

Если же, таких ссылок много, то нужно обращаться к элементу по индексу, например:
$(".dealbtn-up")[0].click()

Почему не можете? Это же тоже обычное поле формы.
Посмотрел старый проект, где это делал. Было так:

...
const request = require('superagent-bluebird-promise')
...
export function addProduct(formData) {
  return dispatch => {
    dispatch({ type: PRODUCT_ADD_REQUEST })
    if (formData.image) {
      return request.post(`${API_ROOT_V1}/api/v1/products/add`)
        .field('name', formData.name)
        .field('price', formData.price)
        .field('description', formData.description)
        .field('providerId', formData.providerId)
        .attach('image', formData.image, formData.image.name) // добавление картинки
        .then(...) // здесь дальнейшая обработка в случае успеха
    } else { // кейс, когда у товара нет картинки
      return request.post(`${API_ROOT_V1}/api/v1/products/add`)
        .send(formData)
        .then(...)
    }
  }
}

В коде компонента formData формирую так:

... 
// (обработчик сабмита формы)
this.props.addProduct({
      name,
      price,
      description,
      image: findDOMNode(this.refs.image).files[0], // (забираю картинку)
      providerId: this.props.providerId,
    })
...

// непосредственно кнопка загрузки файла в форме
<div className='form-group'>
          <input
            id='productImage'
            type='file'
            name='image'
            placeholder='Image'
            onChange={this.handleChange}
            value={this.state.image}
            data-field-name='image'
            ref='image' />
          <p>Load product image</p>
        </div>
...

location.reload() ?

Так же можете использовать code splitting (https://toster.ru/answer?answer_id=1010668)

У вас порядок передачи пропсов в компонентах выглядит так: Comment -> UserInfo -> Avatar

Comment передает в свойстве user объект:

{
       "url": "/",
      "name": "Nikulio"
}

Следовательно, этот объект теперь доступен в UserInfo через props.user. В Avatar так же передается в качестве свойства user этот же объект.

Следовательно, у Avatar в props будет объект:

{
    user: {
        url...
        name....
    }
}

Следовательно, в Avatar к значениям этих свойств можно обратиться: props.user.url , props.user.name

Не совсем по теме..

Супер "полноценных" нет, но где-то тут же на тостере уже всплывала подобная тема. Из давнего (уже) помню soundcloud клиент - статья, github.

Выложить в open-source рабочее бизнес-приложение - практически невозможно.
Выложить какую-то его часть, которая сделана хорошо - уже реальнее, по такому типу можно смотреть на хорошие библиотеки (типа react-virtualized). Но опять же, там "архитектуры" по вашему вопросу нет.
Выложить в общий доступ хороший "учебный" проект - самое реальное. Поэтому может найдется где хорошее платное учебное приложение? А может и бесплатное...

p.s. все же упирается в деньги/время. Если даже бизнес скажет - "выкладывай куда хочешь", то выложите ли вы свою поделку? Вряд ли, так как написано оно было в стиле "пожалуйста, выкати фичу побыстрее, если потом будет время - порефакторишь". Поэтому просто предлагаю писать по мере своих возможностей, а учиться продолжать там же где и раньше, так как полноценное крепкое приложение в опен-сорсе, это почти миф.