DEV Community

Vy Quốc Vũ
Vy Quốc Vũ

Posted on • Updated on

I wrote a state management npm - Any State

#typescrpit #react #solidjs #statemanagement

Features:

Lightweight object state management
Open Source Project
Small App Size (~2Kb)
Easy to use with nay framework, just a callback on change

About:

AnyState is an open source programs built using Typescript (for a more secure environment).

Usage

Initialize anyState object with createStore()

  const anyState =  createStore({
    name: 'John',
    age: 30,
    children: [{
      name: 'Bob',
      age: 5,
    }]
  });
Enter fullscreen mode Exit fullscreen mode

Set state

  anyState.setState({
    name: 'John',
    age: 30,
    children: [{
      name: 'Bob',
      age: 5,
    }]
  });
Enter fullscreen mode Exit fullscreen mode

Get state

  const state = anyState.getState();
Enter fullscreen mode Exit fullscreen mode

Set item

  // const path = 'name';
  const path = 'children[0].name'; // the path to the item
  anyState.setItem(path, 'Jane');
Enter fullscreen mode Exit fullscreen mode

Get item

  const path = 'children[0]';
  const child = anyState.getItem(path);
Enter fullscreen mode Exit fullscreen mode

Watch onChange

  const path = 'name'; // path to item
  anyState.watch(path, (nextState, prevState) => {
     // do anything
  });
Enter fullscreen mode Exit fullscreen mode

Examples

React Todo

Solid Todo

Links:

GitHub: https://github.com/vyquocvu/anystate
Npm: https://www.npmjs.com/package/anystate
MySite: https://vyquocvu.co/

Happy coding! 🎉
Accepted any advices.

Top comments (5)

Collapse
 
joelbonetr profile image
JoelBonetR 🥇 • • Edited

Love the initiative! :)

My feedback on it looking at the API:

This set and get methods for items are using array indexes directly which is bad yada yada.

I'd recommend to use nested objects so you can identify pieces of data easily:

const anyState = anystate.set('user', {
  name: 'John',
  age: 30,
  children: [{
      name: 'Bob',
      age: 5,
  }]
});
Enter fullscreen mode Exit fullscreen mode

So then you can

const entireState = anyState.get();
const user = anyState.get('user');
const userChildren = anyState.get('user.children');
Enter fullscreen mode Exit fullscreen mode

For example. This way you can also get rid of createState() because setState will create it if not exists and getItem is no longer necessary.

*Also remember that you need some way to ensure that you can't override a state by redefining it anywhere else

Check this as well to see if it suits this project.

Do you plan a roadmap for AnyState? That would be nice! 👌😁

Looking forward to see how it evolves

Collapse
 
vyquocvu profile image
Vy Quốc Vũ •

Thanks @joelbonetr so much!
I very appreciate your advice, i will improve this project day by day.

Collapse
 
joelbonetr profile image
JoelBonetR 🥇 •

awesome! :)

Collapse
 
vyquocvu profile image
Vy Quốc Vũ •

that's great, thanks @lukeshiru

Collapse
 
teqlinhdong profile image
teq-linhdong •

my brother is fucking good

Read next

bharath_madhu profile image

State and Props: Mastering Data Flow in Your React Native App

BHARATH M -

pachicodes profile image

Learn how to add real-time synchronization to a React Flow application

Pachi 🥑 -

husanr profile image

Which books about React are worth reading?

启上巴下 -

saeedniyabati profile image

Mastering SSR in Next.js: How to Boost SEO and User Experience

Saeed Niyabati -