Антон Спирин

Не надо копить, а затем отправлять все данные сразу. Коллекциями их принято только забирать с сервера.
1. Каждое добавление карточки это POST запрос на добавление одной карточки.
2. Каждое добавление записи это POST запрос на добавление записи.
3. Каждое обновление записи или карточки это PUT/PATCH запрос с обновленными данными одной записи/карточки.
4. При удалении карточки, если записи лежат отдельно, на стороне сервера надо их так же удалить.

Неправильный подход к разработке. Варианты, как это сделать правильно:
1. Данные забираются Ajax запросом по API
2. Если хотите отдавать данные со страницей, можно записать в любой тег в атрибут data-state или в тег скрипт, в ключ window.__data
3. Можно написать node сервер с SSR и делать рендер на стороне сервера.

Можно использовать нативный скрытый checkbox. Использовать его можно будет как контролируемый, так и как самостоятельный элемент. Слушать onChange или использовать ref. Стилизовать его можно под что угодно. Чтобы работало, надо обязательно использовать элемент label.
Думаю, это самый универсальный и оптимальный вариант для этой задачи.
Пример с использованием StyledComponents:

Ни одно свойство не является обязательным.

Если отображаете в списках имя пользователя, то лучшим вариантом будет, на сервере добавлять к каждому заказу пользователя в поле linked. Так вы получите все необходимые данные за один запрос.
Либо, что-то вроде:

componentDidMount() {
  this.fetchData();
}

async fetchData() {    
  try {
    const orders = await fetch('orders-path', options).then(response => response.json()); 

    const users = {};
    for (let i = 0; i <= orders.length; i++) {
      const id = orders[i].user_id;
      const user = await fetch('/user/' + id, options).then(response => response.json());
      users[id] = user;
    } 

    this.setState({ orders, users });
  } catch (e) {
    // handle error
  }
}

export const actionFromA = data => async (dispatch) => {  
  dispatch(actionFromA());
}

Документацию хоть почитайте.
Аргумент dispatch это функция store.dispatch.
Обновление состояния хранилища инициируется передачей в эту функцию объекта действия:
store.dispatch({ type: 'action_name' });
Ваш action creator actionFromA() возвращает подобный объект. И вызов:
dispatch(actionFromA());
Эквивалентен:

store.dispatch({ /* объект возвращаемый actionFromA */ });

На egghead много видео уроков, в том числе два бесплатных курса от Дена Абрамова.
https://egghead.io/browse/libraries/redux
Платные, при желании, можно найти бесплатно на просторах интернета.

Посмотрите вендорные библиотеки. Посмотрите демки, которые есть в свободном доступе, на официальном сайте или на codepen. Возможно на сайте они и использованы. Можно попробовать поискать использование библиотек в коде. Весь проект копировать ни в коем случае не надо. А уж тем более пытаться запустить.

Пример демо tree.js.

Связь с бекендом по REST API. Отправляете запрос, получаете ответ. Все просто.
Вообще список задач можно и в localstorage сохранять.
Но если решили сохранять в базу, то примерно так должно происходить сохранение задач:
1. Пользователь заполнил форму и нажал "Добавить"
2. POST запрос на сервер
3. В случае успеха ответ и сохранение данных в store redux
4. список обновляется и задача отображается в интерфейсе

Если нет эндпоинтов на сервере можно написать заглушки на фронте, например, инъекцию липовых данных через connect.
Или можно сразу написать эндпоинты на сервере. Если работаешь один можно использовать оба варианта. Я обычно сразу пишу эндпоинты.

Бандл в режиме разработки собирать не надо, webpack dev server его пересобирает налету при каждом изменении. Советую настроить hot reload.

Так же в современных приложениях часто реализуют server side rendering. Тут масса своих тонкостей и об этом лучше почитать соответствующие статьи.

Без параметров:

const withSort = WrappedComponent => props => {
  return WrappedComponent ? <WrappedComponent {...props} /> : null;
});

Использование:
export default withSort(Component);

C параметрами:

const withSort = (...params) => WrappedComponent => props => {
  // params usage
  return WrappedComponent ? <WrappedComponent {...props} /> : null;
});

Использование:

export default withSort(param1, param2)(Component);

У вас отсутствуют какие-либо скрипты для запуска. Скрипта it нет. Видимо, не все по видео делали.
Вы и webpack с babel не установили, webpack.config не настроили.
Изучать React по видео-урокам, думаю, не самый эффективный способ.
В вашей ситуации могу посоветовать, разве что, оставить эти видеоуроки, раз у вас не получается следовать инструкциям с экрана и найти какой-нибудь курс в виде цикла статей с примерами кода и изучать их.

По руководству по подключению React с официального сайта. Приучите себя помимо копирования примеров кода еще и читать все, что написано в статье. В них изложена вся информация об инструментах необходимых для сборки и запуска приложения и их настройках.
В статье написано про npm, webpack, babel, прессеты и конфигурации. И даже ссылка на create-react-app есть.
Думаю, вам стоит начать именно с create-react-app.
Если у вас плохо с английским, то могу только порекомендовать читать/смотреть уроки и статьи на русском языке.

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

Вы должны понимать, что когда происходит рендер React компонента происходят следующие вещи:
1. расчет нового узла Virtual DOM
2. добавление по полученной Virtual DOM модели элеменов в реальный DOM
когда же происходит перерендер React компонента, происходит примерно следующие:
1. расчет новой версии узла Virtual DOM
2. сверка ее со старой
3. при необходимости вносятся изменения в реальный DOM

Поэтому ваш вопрос поставлен некорректно. Если изменить Virtual DOM, не изменив после этого обычный, изменений на Веб-странице вы не увидите. Так как это лишь объект в памяти вашего приложения:

{
  type: 'ul', props: { 'class': 'list' }, children: [
    { type: 'li', props: {}, children: ['item 1'] },
    { type: 'li', props: {}, children: ['item 2'] }
  ]
}

Сам React изменяет DOM медленней, чем если бы вы изменяли его напрямую. Так как помимо самого изменения DOM, надо рассчитать новую версию Virtual DOM, сравнить со старой и только потом внести изменения. Об этом можете почитать в статьях ниже.

Статьи по теме:
Почему Virtual DOM медленней
Бенчмарк
Как работает Virtual DOM
Как написать ваш собственный виртуальный DOM

Если хотите изменить стили React.Component надо передавать методе render свойство className. Так же можно вынести все элементы компонента в статические поля, чтобы позже переопределять их стили.

const Wrapper = styled.div`
  // some styles
`;

const ChildElement = styled.div`
  // some styles
`;

class MyComponent extends React.Component {
  static ChildElement = ChildElement;
  
  render() {
    const { className } = this.props;

    return (
      <Wrapper className={className}>
        <ChildElement>Some text</ChildElement>
      </Wrapper>
    )
  }
}

export default MyComponent;

const SyledMyComponent = styled(MyComponent)`
  // some styles

  ${MyComponent.ChildElement} {
    // some styles for ChildElement
  }
`;

Метод extend работает только со StyledComponent:

const AbstractElement = styled.div`
  // some styles
`;

const ConcreteElement = AbstractElement.extend`
  // some styles
`;

Можно написать функцию которая будет писать токен в заголовки по-умолчанию и при получении токена ее вызывать.

import Axios from 'axios';

const setupAxios = token =>
  (Axios.defaults.headers = {
    Authorization: `Bearer ${token}`,
  });

export default setupAxios;

Если надо только заполнять одну форму, то нет. Если надо еще и работать с полученными данными, то лучше использовать.

Styled Components. В исходном коде вообще нет селекторов, а JSX получается лаконичный и легко читаемый.

Попробуйте так:

yield all(effects)
yield put({type: 'LOAD_END', payload: {results} })

Метод componentDidMount вызывается после render. Видимо, при первом вызове render у вас свойство productDetail.loading стоит в положении false.
Если собираетесь рендерить список, то ничего страшного в этом нет, так как с пустым массивом ошибки [].map не будет, а после render сразу начнется загрузка.
В других случаях надо делать дополнительные проверки.