Никита Гущин

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

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

Создаете реакт-элемент, который будет контейнером. После didMount работаете с DOM внутри этого компонента

class MyD3Component extends Component {
  componenDidMount() {
    ReactDOM.findDOMNode(this.refs.container) // для d3
  }
  
  render() {
    return <div ref="container" />
  }
}

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

Лучше все это делать через редьюсеры. Флаг открытия модального окна, id айтема - все там хранить. Только в 4м пункте в модалку можно передать dropId из state, а на закрытие окна повесить общий обработчик - dropItem(id).

Не не не, тут не много не такая логика. children - это компоненты, не установленные в ДОМ ноды. Можно сделать что-то вроде такого https://jsbin.com/casomojovo/edit?js,console. И уже через refs вы можете вытащить DOMNode

class Container extends React.Component {
   constructor(props){
     super(props);
   }
   
   componentDidMount(){
     console.log('componentDidMount', Object.keys(this.refs));
     // outputs: [ 'ch0', 'ch1' ]
   }
   
   render(){
     
     return (
       <div>{React.Children.map(this.props.children, (ch, i) => React.cloneElement(ch, { ref: 'ch' + i }))}</div>
     );
   }
}

ReactDOM.render(
  <Container>
    <div>hello</div>
    <div>world</div>
  </Container>, 
  document.querySelector('.main-container')
);