Ну немного прояснилось после мозгового штурма. Буду пробовать ваши варианты. Спасибо за помощь!

а doSomething здесь это ж actionCreator функция, она то не асинхронная, как она заставит компонент подождать своего выполнения? она ж не знает что ее в саге ловят и там делают запрос

За конкретно тот код не скажу, но с санками диспатч может возвращать значения. В том числе и промисы

Там идея в том, чтобы не юзать редакс вообще

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

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


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

Я бы в сторону какого-то компонента оверлея/обертки. Возможно, это был бы хок который рендерит модалки.
Хранил бы только идентификаторы модалки. Для хранения состояния использовал бы контекст АПИ и пробрасывал вниз колбек, который бы устанавливал локальное состояние компонента. Но можешь и через редакс, если тебе так будет удобнее.
Также, необходимо написать 1 обработчик который будет отрабатыват на любое закрытие любой модалки, чтобы обнулять состояние.

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

const modals = {
  [SOME_MODAL_ID]: (обработчикЗакрытия) => SomeModal  пропсы, обработчикЗакрытия />
  [ANOTHER_MODAL_ID]:  (обработчикЗакрытия) => <AnotherModal пропсы, обработчикЗакрытия />
}

когда рендеришь, берешь идентификатор из состояния и делаешь что-нибудь похожее

render() {
   const { modalId } = стор или состояние обертки;
   const modal = modals[modalId] ? modals[modalId](обработчикЗакрытия) : null;

   return (
      <React.Fragment>
         <Свои компоненты />
         {modal}
      </React.Fragment>
   )
}

Таким образом, на выходе у тебя получится лишь одна обертка, которая отвечает за рендеринг модалок в приложении.
Она же и экспоузит вниз колбеки, которыми можно менять состояние обертки (если это контекст), и рендерить модальное окно.

Надеюсь, это будет для тебя полезно

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

Так а в чем проблема, прокидывай в пропсы что нужно

А калбеки?

Хотя да можно и так пробрасывать

+

мапа - это лишь способ не писать много ифов
добавил функции, как значения, чтобы как раз реализовать технику рендер пропсов, хотя они здесь не как пропсы))

ты можешь брать с хранилища данные и пробрасывать

а можешь реализовать и через ифы
если тебе так будет удобнее (мне нет)

я бы, наверное, посидел еще подумал, и придумал что-нибудь третье
но это никак не влияет на функционал, с которым тебе нужно было помочь
эту проблему надеюсь решили

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

Работает то все ок, но чую что это неверный путь

а что означает сложные контексты?
Ты пишешь 1 контекст, который экспоузит вниз лишь 1 функцию-колбек
которую ты можешь вызывать в любой точке приложения, передав идентификатор, который соответствует желаемому модальному окну

И раз тут начался разговор - то что делать с кейсом сброса стейта при повороте браузера на мобильных? Почему реакт сбрасывает стейты компонентов?

То есть просто определять функцию типа onRenderPopup и управлять простыми параметрами попапа?