dexie-state

A small state management library on top of dexie and Indexeddb. Gives you the power to produce a persist state and a uniform data model. Great for managing a cross-iframes state or a cross-frameworks state on the same origin.

How to use it?

For now dexie-state supported only in typescript. install:

yarn add dexie-state

or

npm i dexie-state

in your project:

import { DexieState } from  "dexie-state";
const myDB = new DexieState("myDB");

const userAccount = myDB.createState<Account>("userAccount", {
    userName: "maor700",
    accountId: 1234,
    balance: 4567,
    coin: "dollar"
});

// retrive the data as a promise;
const balance = await userAccount.state.balance;

// set the value
userAccount.state.balance = 1234;

// retrive the data as observable;
liveQuery(() => userAccount.state.balance)
    .subscribe(balance => {
        // do something with balance
    });

// retrive all state props
const u_account = await userAccount.getState();

You can also use it in react with hooks

import { useStateProp, useCreateState, DexieState } from  "dexie-state";

const userAccount = myDB.createState<Account>("userAccount", {
    userName: "maor700",
    accountId: 1234,
    balance: 4567,
    coin: "dollar"
});

const UserAccountPanel: FC = () => {
const [accountId, setAccountId] = useStateProp<Account>(userAccount, "accountId");

// you can create a new state directly in the component
const [billsState] = useCreateState<Billing>(myDB, "bills", {
    bills: [],
    products: [],
    showHistory: false
});

const [showHistory, setShowHistory] = useStateProp<Billing, boolean>(billsState, "showHistory");

return (
    <>
        <div className="user-account" >
            AccountId: {accountId}
        </div>
        {showHistory && <div className="bills-section">
            <h2>Bills History</h2>
        </div>}
    </>
)

}

You can use it in your extended dexie model

import { DexieState } from  "dexie-state";
   
class UserAccountModel extends DexieState {
// create your state
    app = this.createState("app", {
        showHistory: false
    })
    
// another stuff of dexie
    bills: Dexie.Table;
    members: Dexie.Table;
    
    constructor() {
        super("account", {}, 1, {
            bills: "&id, date, amount, coin, userId",
            members: "&userId, first, last, email"
        });
        this.bills.mapToClass(BillRecord)
        this.members.mapToClass(MemberRecord)
    }
}
const accountDB = new UserAccountModel();
const isToggled = await accountDB.app.state.showHistory;