Доступ к разрешённому результату за пределами его promise

Простейший подход: Сразу используйте await.

Он работает и на верхнем уровне, и внутри тела async-функции.

Документация: Async / Await | ReScript Language Manual (https://rescript-lang.org/docs/manual/async-await)

 let resolved: Profile.t = await fetch("")
 ->Promise.then(Response.json)
 ->Promise.thenResolve(payload => {
   let record = JSON.Decode.object(payload)->Option.getOrThrow
   Profile.fromJson(record)
 })

Но вообще хорошая практика состоит в том, чтобы вызывать обновление состояния reducer через функцию dispatch:

 type model = {
   profile: option<Profile.t>,
 }

 type event = SetProfile(Profile.t)

 let reduceState = (model, event) => {
   switch event {
   | SetProfile(profile) => {
       ...model,
       profile: Some(profile),
     }
   }
 }

 @react.component
 let make = () => {
   let (model, sendAction) = React.useReducer(
     reduceState,
     {
       profile: None,
     },
   )

   React.useEffect(() => {
     fetch("")
     ->Promise.then(Response.json)
     ->Promise.thenResolve(payload => {
       let record = JSON.Decode.object(payload)->Option.getOrThrow
       let profile = Profile.fromJson(record)

       sendAction(SetProfile(profile))
     })
     ->Promise.ignore

     None
   }, [sendAction])

   switch model.profile {
   | Some(profile) => <div> {React.string("Profile ready")} </div>
   | None => <div> {React.string("Waiting...")} </div>
   }
 }

Я нахожусь внутри reducer, поэтому async-контекста, в котором можно использовать await, у меня нет.

С dispatch внутри promise в моём случае всё несколько сложнее. Возможно, стоит сделать всё async по умолчанию и расставить promises по всему коду, не знаю.

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

Вообще говоря, стоит избегать запуска побочных эффектов внутри reducer. Именно поэтому reducers обычно не содержат async-функций, и так и должно оставаться.

Когда action меняет состояние reducer, можно сделать это состояние зависимостью чего-то вроде useEffect, а свои (async) побочные эффекты, включая вызовы fetch, выполнять там.

Также полезно явно перечислить возможные состояния компонента:

 type model = Pending | Ready(Profile.t)

 type event = ReplaceState(model)

 let reduceState = (model, event) =>
   switch event {
   | ReplaceState(model) => model
   }

 @react.component
 let make = () => {
   let (model, sendAction) = React.useReducer(reduceState, Pending)

   React.useEffect(() => {
     fetch("")
     ->Promise.then(Response.json)
     ->Promise.thenResolve(payload => {
       let record = JSON.Decode.object(payload)->Option.getOrThrow
       let profile = Profile.fromJson(record)

       sendAction(ReplaceState(Ready(profile)))
     })
     ->Promise.ignore

     None
   }, [sendAction]

   switch model {
   | Ready(profile) => <div> {React.string("Profile ready")} </div>
   | Pending => <div> {React.string("Waiting...")} </div>
   }
 }

При этом я сам часто прибегаю к приёму, который принудительно создаёт async-контекст, когда он нужен:

 module AsyncRunner = {
   let run = (createTask: unit => promise<unit>) =>
     createTask()->Promise.ignore
 }

 let handleSync = () =>
   AsyncRunner.run(async () => {
     let payload = await fetch("")->Promise.then(Response.json)
     let record = JSON.Decode.object(payload)->Option.getOrThrow
     let profile = Profile.fromJson(record)

     sendAction(ReplaceState(Ready(profile)))
   })