Rex State v1.0 소개

처음에는 상태 관리 라이브러리로 rex-state를 구축했지만 Context API를 사용하고 있었기 때문에 재렌더링을 처리하는 데 그다지 효율적이지 않았습니다.

그러나 그 다음 또 다른 기능이 더욱 두드러졌습니다. 모든 후크를 공유 상태로 쉽게 변환할 수 있습니다!

이 기능을 중심으로 오늘은 Rex State 1.0을 출시합니다. 이 도구는 사용하기 쉽고 기존 후크와 함께 작동합니다.

용법

프로젝트에 rex-state 추가

yarn add rex-state

# or

npm i rex-state

다음과 같은 카운터 후크가 있다고 가정하십시오. ﹣

const useCounterHook = (initialCount) => {
  const [count, setCount] = useState(initialCount || 0);

  const increaseCount = () => setCount(count + 1);
  const decreaseCount = () => setCount(count - 1);

  return {
    count,
    increaseCount,
    decreaseCount
  };
};

다음 코드를 사용하여 rex-state를 사용하여 공급자와 공유 후크를 만들 수 있습니다.

import { createRexStore } from "rex-state";

const { 
  useStore: useCounter, 
  RexProvider: CountProvider 
} = createRexStore(useCounterHook);

CountProvider ﹣

export default function App() {
  // Starting off with an initial count of 10
  return (
    <CountProvider value={10}>
      <CountDisplay />
      <Controls />
    </CountProvider>
  );
}

이제 useCounter 및 <CountDisplay/> 구성 요소 모두에서 <Controls/> 후크를 사용할 수 있습니다. <Controls/> 구성 요소에서 개수가 변경되면 <CountProvider/>가 다시 렌더링되고 <CountDisplay/> 구성 요소도 업데이트됩니다.

이것은 React.Context API를 기반으로 합니다. 나는 performance 및 귀하의 응용 프로그램에서 언제 사용할지에 대한 자세한 페이지를 작성했습니다.

다음은 카운터 앱 ﹣의 작동 코드 및 상자입니다.



자세히 알아보기Github

이 라이브러리 사용에 대한 생각을 공유하십시오. 피드백과 아이디어를 환영합니다 ✌🏽