Core Concepts
Event
Event is an intention to change state.
const event = createEvent() // unnamed eventconst onMessage = createEvent('message') // named event
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 effectsdata.watch(console.log)
Effect
Effect is a container for async function.
It can be safely used in place of the original async function.
The only requirement for function:
- Should have zero or one argument
const getUserFx = createEffect('get user').use(params => { return fetch(`https://example.com/get-user/${params.id}`).then(res => res.json(), )})
// subscribe to effect callgetUserFx.watch(params => { console.log(params) // {id: 1}})
// subscribe to promise resolvegetUserFx.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 anytimegetUserFx.use(() => promiseMock)
// call effect with your paramsgetUserFx({id: 1})
const data = await getUserFx({id: 2}) // handle promise
Store
Store is an object that holds the state tree. 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)