https://github.com/zengxiaoluan/use-atom-store
Easy manage your React external store.
https://github.com/zengxiaoluan/use-atom-store
react-store reacthooks reactjs use-atom valtio
Last synced: 4 months ago
JSON representation
Easy manage your React external store.
- Host: GitHub
- URL: https://github.com/zengxiaoluan/use-atom-store
- Owner: zengxiaoluan
- Created: 2023-10-04T02:09:57.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-17T04:08:25.000Z (over 1 year ago)
- Last Synced: 2025-01-02T11:09:57.937Z (5 months ago)
- Topics: react-store, reacthooks, reactjs, use-atom, valtio
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/use-atom-store
- Size: 92.8 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# use-atom-store
This library is aim to handle outer store's state in your react component that which solved the render accurately problem, I hope you will enjoy it.
```shell
npm i use-atom-store -S
```
You can use this like:
```jsx
import { createAtomStore, useAtomStore } from "use-atom-store";
let myStore = createAtomStore({ count: 0, hello: "hello" }); // create a store
function changeHello() {
myStore.setState((prev) => {
return {
...prev,
hello: prev.hello + "world",
};
});
}
function changeCount() {
myStore.setState((prev) => {
return {
...prev,
count: prev.count + 1,
};
});
}
export default function App() {
return (
Change Hello
Change Count
);
}
let helloRenderTimes = 0;
function DisplayHello() {
let [state, setState] = useAtomStore(myStore, (state) => ({
hello: state.hello,
}));
return (
{
setState((prev) => ({ ...prev, hello: prev.hello + "world" }));
}}
>
{state.hello} - helloRenderTimes: {++helloRenderTimes}
);
}
let countRenderTimes = 0;
function DisplayCount() {
let [state, setState] = useAtomStore(myStore, (state) => ({
count: state.count,
}));
return (
{
setState((prev) => ({ ...prev, count: prev.count + 1 }));
}}
>
{state.count} - countRenderTimes: {++countRenderTimes}
);
}
```
## Automatic collect state of a store
If you want automatic collect state which you used in current component, you can use another api `createAutoStore` and `useAutoStore`, below is the demo:
```javascript
import { memo } from "react";
import "./App.css";
import { createAutoStore, useAutoStore } from "./use-atom-store";
let testAutoStore = createAutoStore({ a: 1, b: 2, c: 3 });
function App() {
let state = useAutoStore(testAutoStore);
console.log("render A/B/C");
state.a;
state.b;
state.c;
return (
);
}
let A = memo(function A() {
let state = useAutoStore(testAutoStore);
console.log("render A");
return testAutoStore.a++}>a{state.a};
});
let B = memo(function B() {
let state = useAutoStore(testAutoStore);
console.log("render B");
return testAutoStore.b++}>b{state.b};
});
let C = memo(function C() {
let state = useAutoStore(testAutoStore);
console.log("render C");
if (state.c > 5 && state.c < 10)
return testAutoStore.c--}>c{state.c};
return testAutoStore.c++}>c{state.c};
});
export default App;
```