Outstated - React를 위한 간단한 후크 기반 상태 관리

React 앱을 만든 적이 있다면 상태 관리가 어려울 수 있다는 것을 알고 있습니다.
Redux는 훌륭하지만 소규모(및 일부 중간 규모) 프로젝트에는 너무 많은 경우가 많습니다.
Unstated 컨텍스트 및 사용자 정의 클래스를 사용하여 소규모 프로젝트에 대한 상태 관리를 단순화했습니다. 그것은 매우 훌륭하지만 새로운 반짝이는 React 후크와 실제로 작동하지 않습니다.
그래서 Unstated와 비슷한 것을 만들 수 있는지 궁금했지만 모든 고리가 있어서 더 멋지게 만들 수 있었습니다.

구식 소개

Outstated은 React를 위한 간단한 후크 기반 상태 관리 솔루션입니다.
일반적인 React 후크를 사용하여 전역 상태를 갖도록 공유할 수 있습니다.
아, 압축된 474바이트에 불과하다고 말씀드렸나요?

예시

import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import {Provider, useStore} from 'outstated';

const store = () => {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(0);

  return {count, increment, decrement, reset};
};

function Counter() {
  const {count, increment, decrement, reset} = useStore(store);

  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
      <button onClick={reset}>reset</button>
    </div>
  );
}

ReactDOM.render(
  <Provider stores={[store]}>
    <Counter />
  </Provider>,
  document.getElementById('root')
);

어떻게 작동합니까?

Outstated는 React 후크와 컨텍스트를 기반으로 구축되었습니다.
후크를 한 번 인스턴스화하고 필요할 때 액세스할 수 있도록 하는 후크 주변의 간단한 컨텍스트 래퍼입니다.

Outstated에는 세 가지 핵심 부분이 있습니다.

가게

이것은 당신의 상태와 그것을 업데이트하기 위한 로직을 저장하는 곳입니다.
스토어는 본질적으로 React 후크입니다(즉, 재사용할 수 있고 Outstated 외부에서 또는 내부에서 use other hooks 사용할 수도 있습니다).

다음은 매우 간단한 저장소의 예입니다.

import {useState} from 'React';

const store = () => {
  const [state, setState] = useState('hello..');

  const greet = val => setState(`hello ${val}!`);

  return {state, greet};
};

상태 관리를 위해 React의 useState 후크를 사용합니다.
이것은 Outstated가 상태 변경과 관련된 어떤 것도 수동으로 관리할 필요가 없다는 것을 의미합니다 - React가 우리를 위해 이것을 처리할 것입니다!
직접 변경state하지 않도록 주의해야 합니다. 그렇지 않으면 구성 요소가 다시 렌더링되지 않습니다.

useStore

다음 조각은 useStore 후크입니다.
이를 통해 트리의 어느 곳에서나 인스턴스화된 저장소에 액세스할 수 있습니다.useStore 후크를 사용하면 특정 저장소 생성자를 사용하여 저장소 인스턴스를 가져올 수 있습니다. 예:

function Counter() {
  const {count, decrement, increment} = useStore(counterStore);

  return (
    <div>
      <span>{count}</span>
      <button onClick={decrement}>-</button>
      <button onClick={increment}>+</button>
    </div>
  );
}

<제공자>

Outstated의 마지막 부분은 <Provider> 구성 요소입니다.
지정된 저장소의 전역 인스턴스 초기화를 담당합니다(React는 재렌더링에서 후크 수가 일관적일 것으로 예상하므로 필요에 따라 동적으로 초기화할 수 없습니다).
그런 다음 컨텍스트를 사용하여 초기화된 저장소 인스턴스를 트리 아래의 모든 구성 요소에 전달합니다.

render(
  <Provider stores={[counterStore]}>
    <Counter />
  </Provider>
);

테스트

Outstated 매장은 후크일 뿐이므로 다음에서 구성할 수 있습니다.
테스트하고 그들에 대해 다른 것들을 아주 쉽게 주장합니다.
다음은 Awesomereact-testing-library을 사용하는 기본 예입니다.

import {act, testHook} from 'react-testing-library';

test('counter', async () => {
  let count, increment, decrement;
  testHook(() => ({count, increment, decrement} = counterStore()));

  expect(count).toBe(0);

  act(() => increment());
  expect(count).toBe(1);

  act(() => decrement());
  expect(count).toBe(0);
});

연결

Outstated on GitHub 을(를) 찾을 수 있습니다.
모든 피드백을 환영합니다. :)