가장 최근 실험중인 라이브러리를 소개합니다.
@custardcream/very-simple-store
간단한 방법으로 구현한 React 전역 상태 관리 라이브러리입니다.
언제 어디에서나 전역 상태와 selector를 선언하고 사용할 수 있고, 비동기 selector 기능도 제공합니다.
설치
npm install @custardcream/very-simple-store
사용법
StoreRoot로 루트 감싸기
import { StoreRoot } from "@custardcream/very-simple-store";
const App = () => {
return (
<StoreRoot>
<App />
</StoreRoot>
);
};
StoreNode
사용하기
StoreNode
는 가장 기본적인 전역 상태의 단위입니다. addStoreNode
함수를 사용해 전역 상태를 선언할 수 있습니다.
import { addStoreNode } from "@custardcream/very-simple-store";
export const storeNode = addStoreNode({
initialState: 0,
key: "testValue",
});
이렇게 선언된 storeNode
는 useStoreNode
훅을 통해 사용할 수 있습니다.
import { useStoreNode } from "@custardcream/very-simple-store";
import { storeNode } from "./storeNode";
const Component = () => {
const [value, setValue] = useStoreNode(storeNode);
return (
<div>
<p>{value}</p>
<button onClick={() => setValue((prev) => prev + 1)}>+</button>
</div>
);
};
storeNode
를 어디에서 선언하는지는 중요하지 않습니다. 어디서든 해당 전역 상태를 사용하고 싶다면 useStoreNode
훅으로 사용해주세요.
StoreSelectorNode
사용하기
StoreSelectorNode
는 StoreNode
를 기반으로 계산되는 상태의 단위입니다. addStoreSelectorNode
함수를 사용해 선언할 수 있습니다.
import { addStoreSelectorNode } from "@custardcream/very-simple-store";
import { storeNode } from "./storeNode";
export const storeSelectorNode = addStoreSelectorNode({
key: "testStoreNodePlusOne",
selector: ({ get }) => get(storeNode) + 1,
});
addStoreSelectorNode
에서 selector
파라미터는 get
이라는 getter 함수를 제공합니다. 이 함수에 StoreNode
를 넣으면 해당 StoreNode
의 값을 가져올 수 있습니다.
이렇게 선언된 storeSelectorNode
는 useStoreSelectorNode
훅을 통해 사용할 수 있습니다.
import { useStoreSelectorNode } from "@custardcream/very-simple-store";
import { storeSelectorNode } from "./storeSelectorNode";
const Component = () => {
const { value } = useStoreSelectorNode(storeSelectorNode);
return <p>{value}</p>;
};
selectorNode
또한 어디서 선언하는지는 중요하지 않습니다. 어디서든 해당 selector를 사용하고 싶다면 useStoreSelectorNode
훅으로 사용해주세요.
async StoreSelectorNode
사용하기
StoreSelectorNode
는 비동기적으로 계산될 수 있습니다. addStoreSelectorNode
에 비동기 selector
를 넣으면 됩니다.
import { addStoreSelectorNode } from "@custardcream/very-simple-store";
import { storeNode } from "./storeNode";
export const asyncStoreSelectorNode = addStoreSelectorNode({
key: "asyncStoreSelectorNode",
selector: async ({ get }) => {
const storeValue = get(storeNode);
const result = await fetchData();
return storeValue + result;
},
});
이렇게 선언된 asyncStoreSelectorNode
는 위와 동일하게 useStoreSelectorNode
훅을 통해 사용할 수 있습니다.
import { useStoreSelectorNode } from "@custardcream/very-simple-store";
import { asyncStoreSelectorNode } from "./asyncStoreSelectorNode";
const Component = () => {
const { value, isLoading } = useStoreSelectorNode(asyncStoreSelectorNode);
if (isLoading) {
return <p>로딩 중...</p>;
}
return <p>{value}</p>;
};
비동기 상태가 준비중인지 여부는 isLoading
으로 확인할 수 있습니다.
또한, 해당 selector 함수가 현재 비동기적으로 몇 개 호출되고 있는지도 currentlyLoadingCount
로 알 수 있습니다.