Антон Спирин

Но почему-то, при загрузке компонента Artobjects, первым из actions вызывается getArtObjects, а потом уже loadUser. Из-за этого, action getArtObjects не может получить данные о юзера из глобального стейта, тк. появляются они позже.

Метод componentDidMount вызывается после того как были смонтированы все дочерние компоненты, естественно
componentDidMount компонента Artobjects вызывается раньше. Но даже если было бы наоборот, то не факт, что результат запроса loadUser возвращался бы раньше вызова getArtObjects. Почитайте про асинхронное программирование, вы явно не до конца понимаете фундаментальные основы.

Такие важные для всего приложения данные, как данные пользователя, лучше начинать загружать как можно раньше. И это можно делать до монтирования корневого компонента:

const store = configureStore();

store.dispatch(clientInit());  // тут

const Root = () => (
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>
);

А до получения этих данных вы можете показывать прелоадер и монтировать Artobjects только после их получения.

{isInitialDataFetching ? <Preloader /> :  this.renderContent()}

Что в данном примере я сделал не правильно?

Почти все.

import React, { useState } from "react";

const initialState = [
  { id: 1, name: 'Moscow' },
  { id: 2, name: 'Kazan' },
  { id: 3, name: 'Sochi' },
  { id: 4, name: 'Ekaterinburg' },
];

const App = () => {
  const [ cities, setCities ] = useState(initialState);

  const handler = () => {
    setCities(prevState => [...prevState, { id: 5, name: 'Saint-Petersburg' }]);
  };

  return (
    <div>
      <button onClick={handler}>Click Me</button>
      <ul>
        {cities.map(city => <li key={city.id}>{city.name}</li>)}
      </ul>
    </div>
  );
};

export default App;

В файле 'actions/filter.js' нет экспорта по-умолчанию.
Исправить можно так:
import { setFilter } from "../actions/filter";

Вы можете иметь неограниченное количество React-модулей на странице.
Но для вашей задачи лучше подойдет Vue, так как он более удобен для частичной интеграции.

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

Во-первых не SAP, а SPA. Во-вторых, если говорить о серьезных коммерческих проектах, то разработка SPA на React обойдется дешевле монстра "вьюхи" на Laravel + "мега-менюхи" на React. Да и поддерживать SPA будет значительно проще.

Как везде:
document.body.classList.add('some-class');

Вызов useCallback(fn, deps) эквивалентен useMemo(() => fn, deps)
Вся разница в дополнительной обертке, которую не придется писать при использовании useCallback, если надо возвращать меморизированный колбек.

Как-то так:

class Menu extends Component {
  state = { isActive: false };
  
  wrapper = React.createRef();
  
  componentWillUnmount() {
    this.removeOutsideClickListener();
  }
  
  addOutsideClickListener() {
    document.addEventListener('click', this.handleDocumentClick);
  }

  removeOutsideClickListener() {
    document.removeEventListener('click', this.handleDocumentClick);
  }
  
  onShow() {
    this.addOutsideClickListener();
  }
  
  onHide() {
    this.removeOutsideClickListender();
  }
  
  onClickOutside() {
    this.setState({ isActive: false });
  }  

  handleDocumentClick = e => {
    if (this.wrapper.current && !this.wrapper.current.contains(e.target)) {
      this.onClickOutside();
    }
  };
  
  toggleMenu = () => {
    this.setState(
      prevState => ({ isActive: !prevState.isActive }),
      () => {
        this.state.isActive ? this.onShow() : this.onHide();
      },
    );
  };

  render() {
    const { isActive } = this.state;

    return(
      <div ref={this.wrapper}>
        <button onClick={this.toggleMenu}>MENU</button>
        {isActive && ( 
          <ul>
            <li>qwe</li>
            <li>asd</li>
            <li>zxc</li>
          </ul>
        )}
      </div>
    )
  }
}

1. Отдаете по всем роутам страниц либо Twig шаблон с div id=root и вашим бандлом. Либо для этой задачи поднимаете Node сервер(express/koa). Используйте Node сервер если нужен SSR.
2. Начальные статические данные пишем например в window.__INITIAL_STATE__, при инициализации на клиенте отправляем их в store.
3. Все общение клиентской и серверной части через REST API.
4. На клиентской стороне используете клиентский роутер(react-router-dom). Если используете SSR на стороне сервера используйте StaticRouter.
Пожалуй все.

Почитайте про библиотеку react-redux, без которой использовать Redux совместно с React не надо.

Судя по примеру в репозитории библиотеки, ExcelSheet является свойством ExcelFile и не экспортируется из модуля напрямую.

import ReactExport from "react-data-export";

const { ExcelFile } = ReactExport;
const { ExcelSheet } = ExcelFile;

Либо не экспортируете Form.

Стараться не использовать прямые обращения к элементам DOM в React разработке и использовать состояние компонента.

const Grid extends React.Component {
  state = { itemsSize: 'sm' };

  handleChangeSize = () => { /* some code */ };  

  render() {
    const { itemSize } = this.state;
    const { items } = this.props;

    return (
      <Wrapper>
        <ControlPanel onChangeSize={this.handleChangeSize} />
        {items.map(item => <Item key={item.id} size={this.state.itemSize} />)}
      </Wrapper>
    );
  }
}

class ExampleComponent extends React.Component {
  state = {
    isReady: false,
  };
  
  hanldeOnLoad = () => {
    this.setState({ isReady: true });
  };
  
  render() {
    const { src } = this.props;
    const { isReady } = this.state;
 
    const className = isReady ? '' : 'some-class';
 
    return (
      <div className={className}>
        <img onLoad={this.hanldeOnLoad} src={src} />
      </div>
    );
  }
}

В компоненте App отсутствует метод NewTask, к которому вы пытаетесь обращаться в конструкторе.

В компонент Button пробросьте onClick:

class Button extends React.Component {
  render () {
    const { text, onClick } = this.props;

    return <StyledButton onClick={onClick}>{text}</StyledButton>;
  }
}

Искользовать Middleware. Есть очень простая и популярная библиотека redux-thunk.
Статья на эту тему.

Для вашей конкретной задачи хорошо подойдет StyledComopоnents:

const hiddenSyle = props => props.hidden && css`
  display: none; 
`;

const disabledStyle = props => props.disabled && css`
  pointer-events: none;
  opacity: 0.3;  
`;

const Input = styled.input`
  ${hiddenStyle}
  ${disabledStyle}
`;

Ну и почитайте про Recompose и Hooks Api

Lifting State Up

1. В вашем случае нет, вам же, насколько я понимаю, нужна навигация без перезагрузки страницы.
2. Забудьте на время разработки что такое JQuery и подходы которые с ним принято использовать. По поводу библиотек, экосистема react содержит множество библиотек. Так же есть смыл подключить библиотеку для ajax запросов axios/superagent/etc. Вообще, перед тем как подключать какую-либо библиотеку лучше 3 раза подумать, так как многие из них существенно увеличивают размер бандла, например, тот же moment. Для того чтобы быть в курсе того, что и сколько в вашем бандле занимает места можно подключить в prod сборку webpack-bundle-analyzer.
3. Почитайте про роутинг на стороне клиента. Для React разработки стандарт react-router.
4. SSR.

Правильно работать с состоянием, а не вычислять его по данным из DOM.
В хранении состояния форм в хранилище Redux нет особого смысла.