Никита Гущин

Если я вас правильно понял:

class Avatar extends React.Component {
  render() {
    const finalClassName = 'avatar ' + (this.props.className || '')
    return (
      <img className={finalClassName} src={this.props.user.avatarUrl} alt={this.props.user.name} />
    );
  }
}


class UserInfo extends React.Component {
  render() {
    return (
      <div className="user-info">
        <Avatar className="user-info__avatar" user={this.props.user} /> 
        <div className="user-info__name">{this.props.user.name}</div>
      </div>
    );
  }
}

Т.е. просто передавайте className как props компоненту Avatar, затем объединяйте в один классНейм:

// выражение в скобочках нужно, чтобы не получилось 'avatar undefined', когда className не передан.
// Я рекомендую указать className, равное '', в defaultProps компонента Avatar
const finalClassName = 'avatar ' + (this.props.className || '')

Также в npm есть удобный пакет https://www.npmjs.com/package/classnames , который позволяет формировать строку с классами. Ваш пример выглядел бы так:

const finalClassName = classnames({
  'avatar': true,
  [this.props.className]: !!this.props.className,
  'some-other-class': someCondition
})

Вполне хорошее решение - проверять права доступа в onEnter. А для чего вам понадобились кукис (касаемо авторизации)? Токены лучше всего хранить в localstorage и синхронизировать с вашим store.

Сгруппируйте роуты, для которых нужна авторизация и ставьте коллбэк туда:

<Route path="/" component={App}>
  <Route onEnter={checkAuth}>{/* Auth routes */}</Route>
  {/* Home page route */}
  <IndexRoute component={Home}>
  {/* Other public routes /*}
  <Route path="about" component={AboutPage} />
</Route>

Вам нужно последовательно пересоздать все вложенные объекты:

return { 
  ...state,
  user: {
    ...state.user,
    response: { ...action.payload },
  }
}

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

function removeFromStructure(id) {
  return { type: REMOVE_FROM_STRUCTURE, paylodad: id }
}
function doSomething(id) {
  return { type: DO_SOMETHING, paylodad: id }
}
function commonAction(structureObject) {
  return structureObject.blockId ? removeFromStructure(id) : doSomething(id)
}

Код я привел просто для примера. Собственно - разбейте на несколько экшенов и обрабатывайте каждый "маленький" экшен в редьюсере.

На бэкенде: делаете rest-api с помощью Laravel.
На фронтенде: берете реакт + редакс и разрабатываете приложение, которое будет общаться бэком через АПИ.

Согласно документации:

match({ routes, location, [history], [...options] }, cb)

Соответственно у вас три варианта:

// автоматически создаст историю
match({ routes, location})

// автоматически создаст историю, при этом передав параметр someOption
// выглядеть это будет примерно так 
// createMemoryHistory(options)
match({ routes, location, someOption })

// вы создаете историю сами (звучит эпично)
match({ routes, location, history })

Что качается basename - то вы его можете как раз и передать как опцию:

match({ routes, location, basename: 'base' })

чтобы при заходе на localhost,сразу писалось типа такого localhost/base

Скорее всего вам понадобится вручную делать редирект с / на /base.

Ваша проблема в том, что вы мутируете объект. redux, как и react, построен на иммутабельности. Я вам привел пример как нужно делать.

Во-первых: вы неверно обновляете структуру - ни в коем случае нельзя мутировать объект.
Во-вторых: почему сразу не сформировать объект action с нужными названиями свойств? (_key, _value)

const action = {
  id: 132,
  _key: 'some key',
  _value: 564
}

return {
  ...state,
  structure: {
    ...state.structure,
    [id]: { ...(state.structure[id] || {}), ...action },
  }
}

Выражение ниже нужно чтобы не получить ошибку, если вдруг state.structure[id] === udefined. Если вы уверены, что такого никогда не случится - можете оставить только ...state.structure[id].
...(state.structure[id] || {})

UPD1. Удаление объекта

Если вы используете lodash (или аналоги) в своем проекте, то удалить можно следующим образом:

import _ from 'lodash'

const { id, parentId } = action
// удаляем из структуры свойство с именем id
const nextStructure = _.omit(state.structure, id)
return {
  ...state,
  structure: {
    ...nextStructure,
    [parentId]: {
      ...nextStructure[parentId],
      childIds: nextStructure[parentId].childIds.filter(cId => cId !== id)
    }
  }
}

Если же вы не используете lodash, то можно сделать так (ссылка на документацию):

const { id, parentId } = action
// в данном случае у нас будет переменная
// const removed = state.structure[id]
// а в переменную nextStructure попадут все значения, кроме id
const { [id]: removed, ...nextStructure } = state.structure
return {
  ...state,
  structure: {
    ...nextStructure,
    [parentId]: {
      ...nextStructure[parentId],
      childIds: nextStructure[parentId].childIds.filter(cId => cId !== id)
    }
  }
}

В рамках реакта выражения "обновлять только те компоненты, у которых изменились props" - это значит "проверять props в shouldComponentUpdate". По-другому никак. даже если вы сделаете List - контейнером, внутри него тоже выполняется такая проверка.

Но почему вы боитесь проверки props? Вся суть концепции (react+redux), что данные иммутабельны и проверка "что-то изменилось?" - это просто проверка по ссылкам (т.е. очень быстрая, никаких deepEquals).
Команда react'а предлагает официальный add-on shallowCompare:

shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }

Я пока использую https://github.com/gaearon/react-pure-render . Делайте ваши "глупые" компоненты как PureRender и будет вам счастье.

Не совсем понял вашу проблему. Добавьте еще одну вкладку и назовите ее "все". У вас беда в том, что вы в рантайме в php вставляете какой-то код внутрь вашего клиентского приложения. Так вообще никогда не нужно делать. Реакт - используется как рендер в SPA, а на PHP вы должны писать rest-api и к нему уже обращаться и загружать данные. Если вам нужны начальные данные из PHP - сделайте вот так:

<html>
  <head>
    <script>
        window.__INITIAL_DATA__ = <?= printInitialData() ?>
    </script>
  </head>
  <body>
    <div class="reactRoot"></div>
    <script src="bundle.js" />
  </body>
</html>

Вам нужно выбрать как у вас будут хранится данные. Посмотрите реализации flux (я рекомендую redux).

И еще небольшое замечание - надо передавать props в родительский конструктор.

constructor(props) {

                super(props);

                this.state = {
                    activeIndex : 0
                };
            }

Сделайте экшен, который будет отвечать за подгрузку начальных данных. Сама загрузка должна происходить не в момент создания редьюсеров, а на старте приложения. Например так:

const store = createStore(history, client, initialState)

store.dispatch(appActions.loadInitialData())

render((
  <Provider store={store}>
    <Router history={finalHistory}>
      {routes}
    </Router>
  </Provider>
), reactRootElement)

А в loadInitialData уже загружайте данные через ajax, например:

function loadInitialData() {
  return dispatch => axios
    .get(`${apiPrefix}/entities`)
    .then(entities => dispatch(saveEntities(entities)))
}

Пример очень общий, но суть, надеюсь, ясна.

PS не забудьте thunk middleware