Skip to content

Action Dispatch On Reducer Effect Story / Observable based State Management Library

Notifications You must be signed in to change notification settings

developer-1px/adorable

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

19 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

adorable/store

Observable based state management Library. Action / Dispatch / On / Reducer + able

What is adorable?

TC39 Observable์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜๋Š” ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ž…๋‹ˆ๋‹ค. RxJS์™€ Redux์—์„œ ์˜๊ฐ์„ ๋ฐ›์•„ ์ž‘์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค. ๋‘ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ชจ๋‘ ์—„์ฒญ ๊ฐ•๋ ฅํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‚˜ ํ•™์Šต ์ง„์ž…์žฅ๋ฒฝ๊ณผ verboseํ•œ ๋ฌธ๋ฒ•์œผ๋กœ ์ธํ•ด ์ ‘๊ทผ์„ฑ์ด ๋–จ์–ด์ง€๋Š” ๋ถ€๋ถ„์„ ๋ณด๊ฐ•ํ•˜๊ณ  ๊ฐ๊ฐ์˜ ์žฅ์ ๋งŒ์„ ๊ฒฐํ•ฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

https://github.com/tc39/proposal-observable

https://rxjs-dev.firebaseapp.com/guide/overview

https://redux.js.org/

Why adorable?

์›น ์„œ๋น„์Šค๊ฐ€ ๊ฑฐ๋Œ€ํ•ด ์งˆ ์ˆ˜๋ก ํ”„๋ก ํŠธ์—”ํŠธ๋Š” ๋ณต์žก์„ฑ์ด๋ผ๋Š” ๋ฌธ์ œ๋ฅผ ๋งž์ด ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. DOM API์ด๋ผ๋Š” ๋ฌธ์ œ๋Š” 10๋…„์ด ๋„˜๋„๋ก ์ž˜ ๋ฐœ์ „ํ•ด์˜จ React, Vue, Angular, Svelte์™€ ๊ฐ™์€ ์›น ํ”„๋ ˆ์ž„์›Œํฌ๋ผ๋Š” ๋„๊ตฌ๋กœ ์‰ฝ๊ฒŒ ์ œ์–ด๊ฐ€ ๊ฐ€๋Šฅํ•ด์ง„ ์˜ค๋Š˜๋‚ ์—๋„ ์ƒํƒœ๊ด€๋ฆฌ์™€ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋ผ๋Š” ์žฅ๋ฒฝ์€ ๋‚จ์•„ ์žˆ์Šต๋‹ˆ๋‹ค.

Redux์™€ RxJs๋Š” ํ˜„์žฌ ์ ์œ ์œจ์„ ์žƒ์–ด ๊ฐ€๊ณ  ์žˆ๋Š” ์ƒํ™ฉ์ด์ง€๋งŒ ๊ทธ ๋ฌธ์ œ์ธ์‹๊ณผ ํ•ด๋ฒ•์€ ์—ฌ์ „ํžˆ ํ›Œ๋ฅญํ•œ ํ•ด๊ฒฐ์ฑ…์ด๋ฉฐ ๋‹ค์†Œ ์•„์‰ฌ์šด ๋ฌธ๋ฒ•๊ณผ ์ง„์ž…์žฅ๋ฒฝ์„ ์ตœ์†Œํ™” ํ•  ์ˆ˜ ์žˆ๋„๋ก API๋ฅผ ์ตœ๋Œ€ํ•œ ๊ฐ„์†Œํ•˜๊ฒŒ ์žฌ์„ค๊ณ„ ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

ํ˜„์žฌ๋Š” XState์™€ ๊ฐ™์€ ์œ ํ•œ ์ƒํƒœ๊ธฐ๊ณ„๋‚˜ Recoil๋“ฑ์˜ family๋“ฑ์˜ ์ตœ์‹  ํŒจ๋Ÿฌ๋‹ค์ž„๊นŒ์ง€ ํก์ˆ˜ํ•ด 1) ์ƒํƒœ๊ด€๋ฆฌ 2) ๋น„๋™๊ธฐ 3) ๋ฐ˜์‘ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ 4) ์ƒํƒœ๋จธ์‹ ์ด๋ผ๋Š” ์ƒˆ๋กœ์šด ํ™”๋‘๋“ฃ์„ ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํŒจํ‚ค์ง€ ํ•ด ๋‚˜๊ฐˆ ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

What is direffent?

  • Rxjs: Pipe method vs DotChain vs Pipeline operator (TBD)
  • Redux: Why Reducer? Why Redux is verbose? What is benefit using Redux?
  • Props Drill, Context API

Read more (TBD)

  • ํ”„๋ก ํŠธ ์—”๋“œ์—์„œ ์ƒํƒœ๊ด€๋ฆฌ๋ž€ ๋ฌด์—‡์ด๋ฉฐ ์™œ ํ•„์š”ํ• ๊นŒ?
  • ๋ฐ˜์‘ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด๋ž€?

Goals

Write less, Do More!


State Management (Basic)

Simple Counter Example

// store.ts
const _INCREARE = action("_INCREARE")
const _DECREARE = action("_DECREARE")
const _RESET = action("_RESET")

export const counter$ = reducer(0, "counter$", counter$ => {

  on(_INCREARE)
    .writeTo(counter$, () => count => count + 1)

  on(_DECREARE)
    .writeTo(counter$, () => count => count - 1)

  on(_RESET)
    .writeTo(counter$, 0)
})
<script>
import {dispatch} from "adorable"
import {_INCREARE, _DECREARE, _RESET} from "./store"
import {counter$} from "./store"

const inc = () => dispatch(_INCREARE())
const dec = () => dispatch(_DECREARE())
const reset = () => dispatch(_RESET())
</script>

<div>count: {$counter$}</div>

<button on:click={inc}>inc</button>
<button on:click={dec}>dec</button>
<button on:click={reset}>reset</button>

action

const _INCREARE = action("_INCREARE")
const _DECREARE = action("_DECREARE")

dispatch

const on_inc_click = () => dispatch(_INCREARE())
const on_dec_click = () => dispatch(_DECREARE())

on

on(_INCREARE)
  .map(...)
  .filter(...)
  .writeTo()

on(_DECREARE)
  .map(...)
  .filter(...)
  .writeTo()

reducer

const counter$ = reducer(0, "counter$", counter$ => {

  on(_INCREARE)
    .writeTo(counter$, () => count => count + 1)

  on(_DECREARE)
    .writeTo(counter$, () => count => count - 1)
})

ref

const ref$ = ref(0)

ref$.set(10)
ref$.update(value => value + 1)

effect

on(_INCREARE)
  .tap(value => console.log("INCREASE!", value))
  .createEffect()

State Management (Advanced)

story

story("counter log", () => {

  on(_INCREARE)
    .tap(value => console.log("INCREASE!", value))
    .createEffect()

...
})

database

database(`/foo/bar`)
  .tap(value => { ... })
  .createEffect()


const nestedValue$ = database(`/foo/bar/baz`)

nestedValue$.set(100)
nestedValue$.update(baz => baz + 100)

const nestedValueArray$ = database(`/foo/bar/collection`).orderBy((a, b) => a.timestamp - b.timestamp)

AQL

const nestedValue$ = SELECT(db.foo.bar)

UPDATE(db.foo.bar).set(100)
UPDATE(db.foo.bar).update(bar => bar + 100)

DELETE(db.foo.bar)

const nestedValueArray$ = SELECT(db.foo.bar.collection).ORDER_BY((a, b) => a.timestamp - b.timestamp)

const todo = {
  id: 1,
  title: "hello"
}

INSERT(db.foo.bar.collection, "id").VALUES(todo)

Adorable Fetching Query(TBD)

  • ์„œ๋ฒ„ API์—ฐ๋™์‹œ ์–ด๋–ป๊ฒŒ loading๊ณผ ์บ์‹œ์™€ invalidate๋ฅผ ๊ด€๋ฆฌํ•  ๊ฒƒ์ธ๊ฐ€?

testCase (TBD)

testCase("test for counter", ({given, when, then}) => {

  given(streamA$, 10)
  given(streamB$, "abc")
  given(streamC$, "def")

  when(_ACTION_A("abcdef"))

  then(() => {

    on(_ACTION_A.REQUEST)
      .exptectTo("abcdef")

    on(_ACTION_A.SUCCESS)
      .exptectTo(300)

    on(_ACTION_A.FAILTURE)
      .exptectTo(300)
  })

})

RxJs

  • ๊ฐœ๋ฐœ ํŽธ์˜๋ฅผ ์œ„ํ•ด์„œ Rxjs์˜ pipe method๋ฅผ ๋‹ค์‹œ dot chain method๋กœ ๋งŒ๋“ค๊ณ , ์‹ค์ „์—์„œ ๊ผญ ์“ฐ์ด๋Š” operator๋งŒ์„ ๊ณจ๋ผ ๋‹จ์ˆœํ™”ํ•˜๊ณ  typescript๋ฅผ ๋ถ™์˜€์Šต๋‹ˆ๋‹ค.

Observable

static operator

  • toPromise
  • castAsync
  • combineLatest
  • concat
  • defer
  • EMPTY
  • forkjoin
  • fromEvent
  • fromEventPattern
  • fromPromise
  • merge
  • NEVER
  • timer
  • throwError

operators

  • bufferCount
  • bufferTime
  • concat
  • count
  • concatMap
  • debounce
  • debounceTime
  • delay
  • distinctUntilChanged
  • duration
  • exhaustMap
  • filter
  • finalize
  • ignoreElements
  • initialize
  • last
  • map
  • mapTo
  • mergeAll
  • mergeMap
  • scan
  • share
  • shareReplay
  • skip
  • skipUntil
  • startWith
  • switchMap
  • tap
  • take
  • takeLast
  • takeUntil
  • takeWhile
  • throttle
  • throttleTime
  • timeout
  • trace
  • until
  • waitFor
  • withLatestFrom

About

Action Dispatch On Reducer Effect Story / Observable based State Management Library

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published