Максим

Запилить любой проект, в котором будут:
1) авторизация
2) роутинг (доступ к некоторым страницам закрыт для не авторизованных)
3) динамическая подгрузка данных

Вопрос можно перефразировать так:
1) можно ли в реакте написать какой-то динамический шаблон
2) в зависимости от чего в моей задаче изменять шаблон

Ответы:
1) да, можно
2) можете завязаться, например, на window.location.pathname . Если там /auth - рисуете шаблон + такой-то набор инпутов или чего вам нужно, если там /test - то другой. Так же можно сразу в constructor в state установить какие-то параметры, на основе которых вы будете отображать шаблон и другие разные варианты.

В render функции это может выглядеть как-то так:

...
render() {
  let template
  if (window.location.pathname.indexOf('auth') !== -1) {
    template = <div>это auth</div>
  } else {
    template = <div>это не auth</div>
  }
  return template
} 
...

export function onChangeUser(value, name) {
  return {
    type:     login.ON_CHANGE_USER,
    fieldName: name,
    value: value
  };
}
...
case loginActions.ON_CHANGE_USER:
  return {
    ...state,
    [action.fieldName]: action.value
}

Вы не передаете в JobsList никаких props, следовательно this.props.Jobs = undefined.
Выносите ваши "джобсы" в тот же файл где export default App, и пишите:

return (
      <div>
        <JobsList Jobs={jobs} />
      </div>
    );

Для этого придумали функцию debounce

onChange={debounce(this.onInputChange, 300)} // будет вызываться не чаще чем раз в 300 ms

Так ответ прямо в вопросе. Отправить весь localStorage.

...
onSubmit() {
const data = JSON.stringify(localStorage)
// отправить data
}

Только учтите, что там могут быть еще данные, не только с вашей формы.

Какая-то тенденция, возможно.. Хочется как-то все "улучшить", вместо "просто писать, пока не будет проблемы". С чем, конкретно, вы столкнулись, что пришло осознание такое?

Мне кажется, может где-то в проекте и есть неудобства, но я их не ощущаю. Появилась папка helpers, куда я выношу функции, которые используются в разных других файлах, все остальное осталось так же как и было изначально (в проекте уже 1200+ коммитов, много компонентов/контейнеров).

p.s. папка locales - там файл перевода, в routes и store - по одному конфиг.файлу.

...
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).

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

А не так:


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

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

Это уже файл после "разбивания на кусочки" (для гугления - code splitting) ?
Грузите то, что нужно определенному роуту и будет получше.

гугление не даст полной картинки сразу, но постепенно соберется.

Потребуется использовать getComponent из React-router, а далее webpack 2 уже сам сделает почти все...

Выглядит так:

function def(promise) {
  return promise.then(cmp => {
    console.info('Dynamic loaded by route: ', cmp.default.displayName) // для тестирования можете логировать имя компонента
    return cmp.default
  })
}

...
<Route path='/signin' getComponent={() => def(import('../containers/SigninContainer'))} />
...