Core Concepts

Event

Event is an intention to do something: start a computation, send a message to another application section or update states.

const event = createEvent()

const onMessage = createEvent()

const socket = new WebSocket('wss://echo.websocket.org')

socket.onmessage = msg => onMessage(msg)

const data = onMessage.map(msg => msg.data).map(JSON.parse)

// Handle side effects

data.watch(console.log)

Store

Store is an object that holds state value. There can be multiple stores.

const $users = createStore([]) // <-- Default state

// add reducer for getUser.doneData event (fires when promise resolved)

.on(getUserFx.doneData, (state, user) => [...state, user])

const $messages = createStore([])

// from WebSocket

.on(data, (state, message) => [...state, message])

$users.watch(console.log) // [{id: 1, ...}, {id: 2, ...}]

$messages.watch(console.log)

Effect

Effect is a container for side effects, possibly async with linked events and stores to subscribe.

const getUserFx = createEffect(async params => {

const req = await fetch(`https://example.com/get-user/${params.id}`)

return req.json()

})

// subscribe to effect call

getUserFx.watch(params => {

console.log(params) // {id: 1}

})

// subscribe to promise resolve

getUserFx.done.watch(({result, params}) => {

console.log(params) // {id: 1}

console.log(result) // resolved value

})

// subscribe to promise reject (or throw)

getUserFx.fail.watch(({error, params}) => {

console.error(params) // {id: 1}

console.error(error) // rejected value

})

// you can replace function anytime

getUserFx.use(() => 'test result')

// call effect with your params

getUserFx({id: 1})

const data = await getUserFx({id: 2}) // handle promise