iomsg v1.3.1

iomsg

I wrote this package due to I was getting a bit sick and tired of doing all the boilerplate needed for other libraries that do state management (Not saying that there's no boilerplate here, but it's less). The focus of IoMessage (iomsg) is to make it easier for lazy people like me, and/or you, to handle state management and data fetching.

Structure

The basic construction of iomsg is that you have a warehouse that needs to be filled with workers that can send messages between each other and store data. Added bonus is that there are listeners that can run functions on messages. Iomsg has a peer dependency of react 16.7 and up since it uses hooks that are not introduced to react until then.

Data fetching

As an adde bonus in this package there's also included a query builder to do data fetching from your api.

Minimum requirement example

A counter seems to be the most used example, so here we go:

install iomsg

npm install iomsg

Basic usage

import React from 'react'
import ReactDOM from 'react-dom'
import Warehouse, { createFactory, useFactory } from 'iomsg'

const counter = (data = { count: 0 }, message) => {
    switch (message.type) {
        case 'increment':
            return { count: data.count + 1 }
        case 'decrement':
            return { count: data.count - 1 }
        default:
            return data
    }
}

const factory = createFactory({
    workers: { counter },
})

const Comp = () => {
    const { data: { counter } send } = useFactory(factory)
    return (
        <>
            {counter.count}
            <button onClick={() => send({ type: 'increment' })}>
                increment
            </button>
            <button onClick={() => send({ type: 'decrement' })}>
                decrement
            </button>
        </>
    )
}

ReactDOM.render(
    <Warehouse factory={factory}>
        <Comp />
    </Warehouse>,
    document.getElementById('root')
)

That's it, you can run this example in any react environment (given it's 16.8 or higher).

createFactory

The create factory function takes a couple of parameter in the options JSON:

• workers
• Listeners

(Work in progress, more goodies will be added)

Workers

Is a dictionary of workers that can be used. in the example above we just use one but you can add many workers to the factory like so:

{
    worker1: workerfn1,
    worker2: workerfn2
    ...
}

Listeners

A listener is a function that listens to a message type and executes a function when it "hears" it. it's constructed like so:

import { listener } from 'iomsg'
export const inc = listener('increment', async (data, message, send) => {
    // send({ type: 'loading' })
    // await some data fetching
    // send({ type: 'loadingDone' })
})

when you create a listener it first takes a string that is the same name of the message type to listen to. Second it's a function that takes three arguments:

More things to come shortly.