sodayo
Introduction
sodayo is a state management for React.
This project is inspired by Pinia and Resso.
Installation
// NPM
$ npm i -S sodayo
// Yarn
$ yarn add sodayo
// PNPM
$ pnpm add sodayo
Docs
Getting Started
Similar to Pinia, sodayo recommends src/stores as a directory for storing the store. You can create this folder first.
Creating a store
Let’s create a new store – how about calling it “app”? (You need to create app.(js|ts) under src/stores)
Then, we need to initialize it.
// `src/stores/app.ts`
import { defineStore, useAtom } from "sodayo";
export const useAppStore = () => {
const useDefine = () => { // See why it's so named below
const count = useAtom(0);
const inc = (n = 1) => { count.value += n; };
return {
count,
inc,
};
};
return defineStore(useDefine);
};
PS: The reason for using “useXXX” as the name instead of “XXX” is React’s limitation on hooks: you can only call another hook in a function that starts with “use”.
If you’ve used Vue and Pinia, this might be familiar. The way to create this Store comes from Pinia. And useAtom is a utility hook that behaves like ref in @vue/reactivity. In defineStore, you can create functions to make changes to the value properties of these atoms, just as inc does. We call these functions “mutations”.
Using a store in the component
In a component, you can do like this to access to the store.
// `src/pages/some-page.tsx`
import { useAppStore } from "../stores/app.ts";
function Page() {
const store = useAppStore();
return (
<div>
{store.count}
<button type="button" onClick={() => store.inc()}>
Add 1
</button>
<button type="button" onClick={() => store.inc(10)}>
Add 10
</button>
</div>
);
}
You might be confused – where is the value property of count? In fact, sodayo hAS a layer internally so that you don’t have to annoy and type .value in your code every time.
PS: You can’t modify the count in the component, you can only modify it through the mutation defined in the store. Because the top-level Proxy does not implement the modification operation on the value.
That’s it! You already understand how to use sodayo. Go and develop your project!
