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

1npm install unostate

Usage

1/* src/store/index.js */
2import { initStore } from "unostate";
3
4export const useStore = () => {
5	const store = initStore({
6		state1: 0,
7		state2: "",
8		state3: {
9			key: "value",
10		},
11		state4: [],
12	});
13
14	return {
15		...store,
16		increment: () => {
17			store.state1.set(store.state1.get() + 1);
18		},
19		addPost: () => {
20			const i = store.state4.get().length;
21			store.state4.set([
22				...store.state4.get(),
23				{ id: i + 1, title: `Post number ${i + 1}` },
24			]);
25		},
26	};
27};

And then in your React component:

1/* src/components/SomeComponent.jsx */
2import { useStore } from "./store";
3
4export const SomeComponent = () => {
5	const { name, age, increment } = useStore();
6
7	return (
8		<div>
9			<h1>{name.get()}</h1>
10			<h2>{age.get()}</h2>
11			<button onClick={name.set("John")}>Change name</button>
12			<button onClick={increment}>Increment Age</button>
13		</div>
14	);
15};

API

initStore

1const store = initStore(initialState: object);

state.get()

1const { someState } = useStore();
2someState.get();

state.set(newState: any)

1const { someState } = useStore();
2someState.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.

Authors and acknowledgment

@leviEyal