DEV Community

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

Posted on • Edited 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

morewings profile image

Let's create Data Table. Part 4: Column pinning

Dima Vyshniakov -

sujans profile image

I wish more designers wrote code

Sujan Sundareswaran -

joodi profile image

Hono.js: A Lightweight Framework with Big Potential 🚀

Joodi -

ayusharpcoder profile image

How to Use Firebase for Authentication and Database in React

Ayush Kumar Vishwakarma -