lstate

lstate

A simple, super-efficient and small (just 2.4kb) global state for React/Typescript applications. A greater alternative to redux, MobX, Zustand...

install

npm install --save lstate

usage

// sample.ts

import React from 'react';
import { createLState, useLState } from "lstate";

export const sample = createLState({
    initial: {count: 0},
    reducers: (setter) => ({
        inc() {
            setter((old) => ({count: old.count + 1}))
        },
    })
})

export function Sample() {
  const { count } = useLState(sample)
  return  <div className="App">
    <p>count: {count}</p>
    <button onClick={sample.inc}>+</button>
  </div>
}

Click here to see a running demo

why?

LState was created with these directives:

• Reduce the boilerplate of UI external state
• Avoid unnecessary rendering
• Best Typescript integration

Advanced features

computed states

// computed.ts
import React from 'react';
import { createLState, useLState } from "lstate";
import { sample } from './sample'

const double = createLState({
  default: {doubleOfCount: 0},
  dependencies: [sample],
  debounce: 3000,
  compute: (setter, sampleValue) => {
      setter((old) => ({doubleOfCount: sampleValue.count * 2}))
  }
})

export function Computed() {
  const { doubleOfCount } = useLState(double)
  const { count } = useLState(sample)
  return  <div className="App">
    <p>count: {count}</p>
    <p>doubleOfCount: {doubleOfCount}</p>
    <button onClick={sample.inc}>+</button>
  </div>
}

collections of items

// collection.ts
import React from 'react';
import { createLState, useLState } from "lstate";

interface Employee {
    _id: number
    name: string
    salary: number
}
const sampleEmployees: Employee[] = [
    { _id: 1, name: 'one', salary: 100 },
    { _id: 2, name: 'two', salary: 200 }
]

export employeeState = sample = createLState({
    id: '_id', // the id field of the collection
    items: sampleEmployees,
    reducers: ({ update }) => ({
        raiseSalary (id: number, amount:number) {
            update(id, (old) => ({ salary: (old.salary || 0) + amount }))
        }
    })
})

export function App() {
  const employees = useLState(employeeState)
  const specificEmployee = useLState(employeeState, 1)
  return  <div className="App">
    <h1>Testing lstate collections</h1>
    <div>
      listing all employees
      <ul>
      {employees.map( employee => (
        <li>{employee.id} {employee.name} {employee.salary}</li>
      ))}
      </ul>
    </div>
    <div>
      Specific employee salary = {employeeOne?.salary || 'not found'}
    </div>
    <button onClick={sample.inc}>raise salary of employee one</button>
  </div>
}