Unostate
A minimalistic state management library for React
What is unostate?
A state management library for React. It's a simple, lightweight, and fast state management library. It's also a great way to learn how state management works.
Installation
npm install unostateUsage
/* src/store/index.js */
import { initStore } from "unostate";
export const useStore = () => {
const store = initStore({
state1: 0,
state2: "",
state3: {
key: "value",
},
state4: [],
});
return {
...store,
increment: () => {
store.state1.set(store.state1.get() + 1);
},
addPost: () => {
const i = store.state4.get().length;
store.state4.set([
...store.state4.get(),
{ id: i + 1, title: `Post number ${i + 1}` },
]);
},
};
};And then in your React component:
/* src/components/SomeComponent.jsx */
import { useStore } from "./store";
export const SomeComponent = () => {
const { name, age, increment } = useStore();
return (
<div>
<h1>{name.get()}</h1>
<h2>{age.get()}</h2>
<button onClick={name.set("John")}>Change name</button>
<button onClick={increment}>Increment Age</button>
</div>
);
};API
initStore
const store = initStore(initialState: object);state.get()
const { someState } = useStore();
someState.get();state.set(newState: any)
const { someState } = useStore();
someState.set(newState: any);License
MIT
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.