[Перевод] От React к Effect20.03.2025 09:31

const App = () => {
  return 
Hello World
}

const App = () => {
  return React.createElement("div", { children: "Hello World" })
}

import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import App from "./App.tsx"

createRoot(document.getElementById("root")!).render(
  
    
  
)

const MyComponent = () => {
  console.log("MyComponent Invoked")
  return 
MyComponent
}

const App = () => {
  
  return 
Hello World
}

const MyComponent = () => {
  console.log("MyComponent Invoked")
  return React.createElement("div", { children: "MyComponent" })
}

const App = () => {
  React.createElement(MyComponent)
  return React.createElement("div", { children: "Hello World" })
}

const MyComponent = () => {
  console.log("MyComponent Invoked")
  return 
MyComponent
}

const App = () => {
  return 
}

const MyComponent = (props: { message: string }) => {
  return 
MyComponent: {props.message}
}

const App = () => {
  return (
    

      
      
      
    
  )
}

export declare namespace ErrorBoundary {
  interface Props {
    fallback: React.ReactNode
    children: React.ReactNode
  }
}

export class ErrorBoundary extends React.Component {
  state: {
    hasError: boolean
  }

  constructor(props: React.PropsWithChildren) {
    super(props)
    this.state = { hasError: false }
  }

  static getDerivedStateFromError() {
    return { hasError: true }
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback
    }

    return this.props.children
  }
}

const MyComponent = () => {
  throw new Error("Something went deeply wrong")
  return 
MyComponent
}

const App = () => {
  return (
    Fallback Component!!!

let resolved = false

const promiseToAwait = new Promise((resolve) => {
  setTimeout(() => {
    resolved = true
    resolve(resolved)
  }, 1000)
})

const MyComponent = () => {
  if (!resolved) {
    throw promiseToAwait
  }
  return 
MyComponent
}

const App = () => {
  return (
    Waiting...

Этот API довольно низкоуровневый, но существуют библиотеки, которые используют его внутренне для обеспечения таких функций, как плавное получение данных (обязательно отдаём должное React Query) и потоковая передача данных с серверного рендеринга с использованием серверных компонентов (новая модная тема).

Кроме того, поскольку компоненты React являются описанием интерфейса для отрисовки, компонент React может получать контекстные данные, предоставляемые родительскими компонентами. Давайте посмотрим:

const ContextualData = React.createContext(0)

const MyComponent = () => {
  const context = React.useContext(ContextualData)

  return 
MyComponent: {context}
}

const App = () => {
  return (
    
      
    
  )
}

В приведённом выше коде мы определили некоторую контекстную переменную — число, и предоставили её на верхнем уровне компонента App. Таким образом, когда React отрисовывает MyComponent, компонент получает свежие данные, предоставленные сверху.

Почему Effect

Вы можете спросить: «Почему мы так много говорим о React? Как это связано с Effect?» Так же, как React был и остаётся важным для разработки мощных пользовательских интерфейсов, Effect имеет равное значение для написания кода общего назначения. За последние два десятилетия JS и TS значительно эволюционировали, и благодаря идеям, предложенным Node.js, сегодня мы разрабатываем full stack приложения на основе того, что некоторые считали игрушечным языком.

По мере того, как растёт сложность наших программ на JS/TS, мы вновь сталкиваемся с ситуацией, когда требования, которые мы предъявляем к платформе, превосходят возможности, предоставляемые языком. Точно так же, как построить сложный пользовательский интерфейс на базе jQuery оказалось бы довольно непростой задачей, разработка приложений производственного уровня на чистом JS/TS становится всё более болезненной.

Код приложений производственного уровня имеет такие требования, как:

• тестируемость

• корректное прерывание

• управление ошибками

• логирование

• телеметрия

• метрики

• гибкость

• …и многое другое.

На протяжении многих лет мы наблюдали добавление множества функций в веб-платформу, таких как AbortController, OpenTelemetry и прочее. Хотя, казалось бы, все эти решения хорошо работают по отдельности, они не справляются с задачей композиции. Написание кода на JS/TS, который удовлетворяет всем требованиям программного обеспечения производственного уровня, превращается в настоящий кошмар из-за зависимостей NPM, вложенных операторов try/catch и попыток управлять конкурентностью, что в конечном итоге приводит к созданию хрупкого, сложно рефакторируемого и, в итоге, неустойчивого ПО.

Модель Effect

Если подвести короткий итог тому, что мы уже обсудили, то мы понимаем, что компонент React — это описание или чертёж пользовательского интерфейса, так же, как можно сказать, что Effect — это описание или чертёж общей вычислительной задачи.

Давайте посмотрим, как это работает на практике, начиная с примера, очень похожего на то, что мы видели в React:

import { Effect } from "effect"

const print = (message: string) =>
  Effect.sync(() => {
    console.log(message)
  })

const printHelloWorld = print("Hello World")

Отрыть в Playground

Как и в случае с React, простое создание Effect не приводит к выполнению каких-либо побочных эффектов. Фактически, как и компонент в React, Effect — это не что иное, как чертёж того, что мы хотим, чтобы наша программа делала. Только при выполнении этого чертежа запускаются побочные эффекты. Посмотрим, как это происходит:

import { Effect } from "effect"

const print = (message: string) =>
  Effect.sync(() => {
    console.log(message)
  })

const printHelloWorld = print("Hello World")

Effect.runPromise(printHelloWorld)

Отрыть в Playground

Теперь сообщение "Hello World" выводится в консоль.

Кроме того, подобно тому как в React мы можем комбинировать несколько компонентов, мы можем объединять различные Effects в более сложные программы. Для этого мы будем использовать generator-функцию:

import { Effect } from "effect"

const print = (message: string) =>
  Effect.sync(() => {
    console.log(message)
  })

const printMessages = Effect.gen(function* () {
  yield* print("Hello World")
  yield* print("We're getting messages")
})

Effect.runPromise(printMessages)

Отрыть в Playground

Можно мысленно сопоставить yield* с await, а Effect.gen(function*() { }) с async function() {}. Единственное отличие состоит в том, что если вы хотите передать аргументы, потребуется определить новую лямбда-функцию. Например:

import { Effect } from "effect"

const print = (message: string) =>
  Effect.sync(() => {
    console.log(message)
  })

const printMessages = (messages: number) =>
  Effect.gen(function* () {
    for (let i = 0; i < messages; i++) {
      yield* print(`message: ${i}`)
    }
  })

Effect.runPromise(printMessages(10))

Отрыть в Playground

Как мы можем выбрасывать ошибки в компонентах React и обрабатывать их в родительских компонентах, так же мы можем выбрасывать ошибки в Effect и обрабатывать их в родительских эффектах:

import { Effect } from "effect"

const print = (message: string) =>
  Effect.sync(() => {
    console.log(message)
  })

class InvalidRandom extends Error {
  message = "Invalid Random Number"
}

const printOrFail = Effect.gen(function* () {
  if (Math.random() > 0.5) {
    yield* print("Hello World")
  } else {
    yield* Effect.fail(new InvalidRandom())
  }
})

const program = printOrFail.pipe(
  Effect.catchAll((e) => print(`Error: ${e.message}`)),
  Effect.repeatN(10)
)

Effect.runPromise(program)

Отрыть в Playground

Приведённый выше код случайным образом завершается с ошибкой InvalidRandom, от которой мы затем восстанавливаемся в родительском Effect, используя Effect.catchAll. В данном случае логика восстановления состоит в простом выводе сообщения об ошибке в консоль.

Однако, что отличает Effect от React, так это 100% типобезопасное обращение с ошибками — внутри нашего Effect.catchAll мы знаем, что e имеет тип InvalidRandom. Это возможно благодаря тому, что Effect использует вывод типов для определения тех случаев ошибок, с которыми может столкнуться ваша программа, и представляет эти случаи в своём типе. Если вы проверите тип printOrFail, то увидите:

Effect

что означает, что этот Effect вернёт void в случае успеха, но может завершиться ошибкой InvalidRandom.

При комбинировании Effects, которые могут завершаться неудачей по разным причинам, итоговый Effect в своём типе будет содержать объединение всех возможных ошибок, например:

Effect

Effect может представлять любой фрагмент кода — будь то вызов console.log, fetch-запрос, запрос к базе данных или вычисление. Кроме того, Effect способен выполнять как синхронный, так и асинхронный код в единой модели, что позволяет избежать проблемы «раскраски функций» (то есть наличия разных типов для async и sync).

Как компоненты React могут получать контекст, предоставляемый родительским компонентом, так и Effects могут получать контекст, предоставляемый родительским Effect. Давайте посмотрим, как это работает:

import { Context, Effect } from "effect"

const print = (message: string) =>
  Effect.sync(() => {
    console.log(message)
  })

class ContextualData extends Context.Tag("ContextualData")<
  ContextualData,
  number
>() {}

const printFromContext = Effect.gen(function* () {
  const n = yield* ContextualData

  yield* print(`Contextual Data is: ${n}`)
})

const program = printFromContext.pipe(
  Effect.provideService(ContextualData, 100)
)

Effect.runPromise(program)

Отрыть в Playground

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

Если вы проверите тип printFromContext, то увидите:

Effect

что означает, что этот Effect вернёт void в случае успеха, не завершится ожидаемыми ошибками и требует наличия ContextualData для своего выполнения.

Заключение

Можно увидеть, что Effect и React по существу разделяют одну и ту же базовую модель — обе библиотеки предназначены для создания композиционных описаний программы, которые затем могут быть исполнены рантаймом. Единственное различие заключается в области применения: React ориентирован на построение пользовательских интерфейсов, а Effect — на создание программ общего назначения.

Это всего лишь введение, а Effect предлагает гораздо больше возможностей, чем показано здесь, включая такие функции, как:

• Параллелизм

• Планирование повторных попыток (Retry scheduling)

• Телеметрия

• Метрики

• Логирование

• И многое другое

Если вам интересно узнать больше о Effect, пожалуйста, ознакомьтесь с нашей документацией, а также с мастер-классом для начинающих.

Если вы дочитали до конца — спасибо за внимание.