solidx

solidx

solidx is a state management library for solidjs.

solidjs internal state management utilities are good but not easy to work. so I created a library based on get-set-immutable. simple, fast, easy to use.

update state as you would update a js object while library does handle immutability for you.

compare with mobx

• it does only use proxies while updating state unlike mobx.
• It has few naming conventions for setters, getters and actions.

state, setters, getters and actions

x is a function that takes an object with state, setters, getters and actions. setters can only update state. getters and actions have to use setters to change state if they need to. use actions to make api calls or handle business logic with timers or promises.etc actions can be async or non async.

naming conventions

• getter's name should start with _
• action's name should start with action_
• setters name can not start with _ or action_

Usage

stackblitz example here

import { init, x } from "solidx";
import { createStore } from "solid-js/store";
// you only need to do this once in your app. preferably in app.tsx 
init(createStore);

const state = x({
  count: 0,
  data: [],
  // setter
  incr(){
    this.count++;
  }, 
  // getter
  _getDoubleCount(){
    return this.count * 2;
  }
  // action
 async action_loadData(){
    this.setData(await fetch("https://jsonplaceholder.typicode.com/posts"));
  }
}); 

// state.count ; => 0
// state.incr();
// state.count ; => 1
// state.getDoubleCount(); => 2
// state.action_loadData();
// state.data ; => [{title: "New Post"}, {title: "New Post 2"}]

use in a component

const App = () => {
  return <div>{state.count}</div>;
};

thank you

Connect with me if you have any questions related to this library.