Алексей

Вопрос: почему после запроса в блоке try
await dispatch(fetchOrderCreate({...formData, type: 'pickup'}));
Выполнение кода продолжается как ни в чем не бывало, и не попадает в блок catch.

Потому что, если почитать документацию, то там будет написано, что createAsyncThunk всегда возвращает resolved промис, даже при ошибке. А чтобы возвращалась оригинальная ошибка нужно дополнительно вызвать unwrap:

await dispatch(fetchOrderCreate({...formData, type: 'pickup'})).unwrap();

Потому что кое что забыли в addMatcher. Сейчас у вас оба слайса в extraReducers матчатся на все асинхронно возвращаемые через промисы экшены, поэтому данные и записываются в оба слайса Т.е. вам необходимо матчить по название thunk + статус, а не только по статусу, как пример, для option:
вот вы создали async thunk с типом "countries/fetchCountries"

export const fetchCountries = createAsyncThunk(
  'countries/fetchCountries',
...

и в addMatcher будет тогда:

(action) => action.type.endsWith("countries/fetchCountries/pending"),

Ну и везде так поменяйте.

У компонента Map добавить событие onClick, из которого можно получить текущие координаты, сохранить их и потом на основании полученных сохраненных координат отрендерить Placemark, который будет потомком Map

const [coordinates, setCoordinates] = useState([])
<YMaps ... >
  <Map ...
    onClick={e => setCoordinates(e.get("coords"))}
  >
  {coordinates.length && <Placemark
    geometry={coordinates}
    options={{
      zIndex: 100
    }}
  />}
  </Map>
</YMaps>

Что-то типа того, но возможно там что-то поменялось, потому что последний раз я эту библиотеку лет 5 назад использовал.

"Чем заменить React.FunctionComponent?" - ничем, так и использовать интерфейс FunctionComponent или тип FC.

В конкретном коде проблема из-за отсутствия запятой в импорте, а не в типизации.

Единственное, на будущее в 18й версии убрали children из FunctionComponent, поэтому при использовании children нужно его явно указывать в типизации пропов.

У вас в состоянии data объект, а в setData вы передаете 2 отдельных параметра из которых используется только первый как аргумент.
поменяйте setData на:
setData({state, panel})
должно заработать

Проблема не в useRef, проблема в том как работает console.log. Если в console.log передается объект, то он выводится по ссылке, в итоге получается, что когда обновляется ref, то браузер автоматом обновляет его в консоли.
Чтобы проверить, что useRef работает как надо - достаточно вывести current значение из ref, т.е. console.log(t.current, 0)
Если же нужно вывести именно объект на момент его логирования, то можно привести объект к строке и снова собрать в объект:
console.log(JSON.parse(JSON.stringify(t, 0)))

На MDN можно почитать про это

Например, так
добавить css:

#comp04 div .selected {
  background: #FF0000;
}

И заменить newColor:

function newColor(e) {
  const element = e.target;
  if (element.classList.contains('selected')) {
    e.target.classList.remove('selected');
  } else {
    e.target.classList.add('selected');
  }
}

Начиная с Node.js 17й версии там теперь используется OpenSSl 3.0, который, видимо, не поддерживается в одной из зависимостей стайлед компонентов.
В качестве временного решения либо откатить ноду на 16ю версию, либо запускать с параметром --openssl-legacy-provider. Можно еще в старт скрипт прописать

"start": "react-scripts --openssl-legacy-provider start"

Опечатка - у вас передается payOlad, а данные в редюсере берутся из action.payload. Рекомендую поставить плагины, типа code spell checker, очень помогает.

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

Далее, самый простой вариант - это ограничение на уровне роутинга, тут все понятно в целом, когда перед переходом на отдельную страницу проверяется наличие прав, иначе показываем заглушку, что в этот раздел доступ ограничен.

Если же требуется разделить на уровне ui одной страницы, когда у нас есть кнопка редактирования данных, например, но обычный юзер может только смотреть, а кнопка должна быть активна редактору/админу, то это уже придется делать на уровне компонентов и отдельной проверки определенных правил для конкретной роли.

Например, я решал такую задачу следующим способом:
1. Создал объект правил доступа для различных компонентов/страниц.

const rules = {
  articles: {
    create: 'articles:create',
    edit: 'articles:edit'
  }
}

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

2. Затем создал объект с уровнями доступа и доступными им правилами, для каждой роли это просто Set в который загоняются доступные действия из правил.

3. Ну и функция, которая на вход принимает правило и по текущей роли пользователя ищет в Set коллекции это самое правило, нашли - значит доступно, вернули true

Далее в нужном компоненте дергаем нашу функцию проверки прав, передавая туда правило для проверки доступа. Например, у нас просто обычный юзер залогинился, а не редактор.
Вызываем checkPermission(rules.articles.edit), если функа вернула false, то блокируем или скрываем кнопку редактирования статьи, ну и т.д.

Редактирование уровней доступа у нас в одном месте, на это же и редактор в целом написать можно будет отдельный, чтобы в коде не править, ну и хранить в таком формате доступы на бэке тогда и просто присылать на фронт открывая/закрывая/изменяя нужные разделы для определенных ролей и т.д.

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

Так работает из-за StrictMode в реакте, потому что в этом режиме на этапе разработки Реакт делает дополнительную проверку и делает вызовы некоторых методов дважды (собственно, это и видно в консоли):

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

1. Методы constructor, render, и shouldComponentUpdate классового компонента
   
2. Статический метод классового компонента getDerivedStateFromProps
   
3. Тело функционального компонента
   
4. Функции обновления (первый аргумент setState)
   
5. Функции, переданные в useState, useMemo, или useReducer
   

В продакшен сборке будет все ок, можно проверить убрав обертку StrictMode, тогда в теле компонента и в useEffect значение test будет одинаковым и вызываться console.log("component", test); будет только один раз при вводе в инпут.