@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, currentlyLoadingCount } = useStoreSelectorNode(asyncStoreSelectorNode);

  if (isLoading) {
    return <p>로딩 중...</p>;
  }

  return <p>{value}</p>;
};

비동기 상태가 준비중인지 여부는 isLoading으로 확인할 수 있습니다.

또한, 해당 selector 함수가 현재 비동기적으로 몇 개 호출되고 있는지도 currentlyLoadingCount로 알 수 있습니다.