Observable – удобный state-manager

Я вас понимаю. Да – еще один. Но давайте посмотрим, вдруг правда?

Давайте определимся с тем, что такое удобно. Конечно, у нас разные представления об удобстве, поэтому я опишу свои с примерами из api react:

• Отсутствие boilerplate.

// неудобно для меня const [state, setState] = useState({ count: 0 })  // было бы удобнее const state = useState({ count: 0 })

• Отсутствие snakepit. Термин придумал сам. Под ним я понимаю необходимость совершать и/или оборачивать операции изменения/присвоения в дополнительный код:

// неудобно для меня const [state, setState] = useState({ count: 0 }) const setCount = (value) => setState(prev => ({ count: prev.count + value }))  // было бы удобнее const state = useState({ count: 0 }) const setCount = (value) => state.count = value

• Ограничения. Например – нельзя вызвать хук внутри условия. Мне неудобно.

Делают ли эти примеры библиотеку react плохой? Разумеется нет, но без этих ограничений – было бы удобнее.

С этой точки зрения, Observable удобен тем, что не накладывает ограничений. Никаких.

Базовый пример

Извините. Дальше будут нормальные примеры, но без каунтера нельзя. Надо соблюдать традиции.

import { Observable, observer } from 'kr-observable'  class CounterState extends Observable {   count = 0    increase() {      ++this.count   }    decrease() {     --this.count   } }  const state = new CounterState()

Это наш стейт. Теперь давайте его используем

// можно так const Counter = observer(() => {   return (     <div>       <button onClick={state.decrease}>         Decrease       </button>       <div>Count: {state.count}</div>         <button onClick={state.increase}>         Increase       </button>     </div>   ) })

// или так const Counter = observer(() => {   return (     <div>       <button onClick={() => --state.count}>         Decrease       </button>       <div>Count: {state.count}</div>         <button onClick={() => ++state.count}>         Increase       </button>     </div>   ) })

// или вот так const increase = () => state.increase() const decrease = () => state.decrease()  const Counter = observer(() => {   return (     <div>       <button onClick={increase}>         Decrease       </button>       <div>Count: {state.count}</div>         <button onClick={decrease}>         Increase       </button>     </div>   ) })

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

1. Оберните компоненты в hoc observer

2. Добавьте нужным классам extends Observable и/или примените к объектам декоратор makeObservable

Надеюсь я вас убедил, что использовать Observable удобно 😉

Дополнительные преимущества

• Малый размер – 2.7 kb (Gzipped, non minified);

• Производительная;

• Framework-agnostic. Из коробки идет с hoc-ом для React, как самой популярной библиотеки, но может работать с любой другой, или без – vanilla, node.js.

Я обещал пример сложнее каунтера. Пожалуйста:

class State extends Observable {   results = []   text = ''   loading = false      // All methods are automatically bounded,    // so you can safely use them as listeners   setText(event: Event) {     this.text = event.target.value   }      async search() {     try {       this.loading = true       const response = await fetch(`/api/search?=${this.text}`)       this.results = await response.json()     } catch(e) {       console.warn(e)     } finally {       this.loading = false     }   }      reset() {     this.results = []   } }  const state = new State()  const Results = observer(function results() {   // Will re-render only if the results change   return (     <div>       {state.results.map(result => <div key={result}>{result}</div>)}     </div>   ) })  const Component = observer(function component() {   // Will re-render only if the text or loading change   return (     <div>       <input          placeholder="Text..."          onChange={state.setText}         disabled={state.loading}         value={state.text}       />       <button          onClick={state.search}         disabled={state.loading}       >         Submit       </button>              <button onClick={state.reset}>          Reset       </button>       <Results />     </div>   ) })

Разумеется, не имеет значения каким образом state оказался внутри Component . При передачи через props поведение не изменится.

Пример с реактивностью. Тут используется autorun , переданная в autorun функция будет вызываться каждый раз, когда в корзину попадает новый товар.

import { Observable, autorun } from 'kr-observable'  class Cart extends Observable {   products = [] }  const cart = new Cart()  let interval  autorun(() => {   const total = catrt.products.reduce((sum, product) => sum + product.price, 0)   if (total > 5000) {     clearInterval(interval)     console.log('Amount is more than 5000')   } })  interval = setInterval(() => {   cart.products.push({ price: 1000 }) }, 1000) // "Amount is more than 5000" (after 5s)

Демо на CodeSandbox

Полная документация на Github или в Npm.

Спасибо что дочитали.