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

상태 관리는 앱의 가장 중요한 부분 중 하나이며 React 생태계에 있는 사람들을 위한 수많은 선택이 있습니다.

특히 Capacitor 및 Ionic React을 사용하여 React로 iOS 및 Android 모바일 앱을 빌드하는 개발자는 종종 상태 관리 권장 사항을 요청합니다. 물론 Redux는 major fan of으로 남아 있지만 MobX 및 rolling your own using the Context API과 같은 훨씬 간단한 상태 관리 접근 방식도 있습니다.

저는 Redux와 Context API를 사용한 맞춤형 접근 방식을 사용하는 데 많은 시간을 보냈습니다. 그래도 만족하지 못했습니다. 단순하지만 고성능인 것을 찾고 싶었고 Hooks 및 Function 구성 요소와 기본 통합되어 현재 React에서만 사용하고 있습니다(죄송합니다. class라는 단어를 다시는 쓰고 싶지 않습니다 😆).

그 때 우연히 Pullstate . Pullstate는 작고 상대적으로 알려지지 않은 라이브러리이지만(이 글을 쓰는 당시에는 별이 300개에 불과했습니다) 시간이 지나면 훨씬 더 유명해질 것으로 예상합니다.

풀스테이트 탐색

Pullstate는 전역적으로 등록된 간단한 Store 개체를 제공하고 구성 요소에 있는 해당 저장소의 데이터에 액세스하기 위한 후크를 제공합니다.

store.ts:

interface StoreType {
  user: User | null;
  currentProject: Project | null;
}

const MyStore = new Store<StoreType>({
 user: null,
 currentProject: null
});

export default MyStore;

그런 다음 구성 요소에서 저장소에 제공된 useState 메서드를 사용하여 저장소에서 데이터를 선택하기만 하면 됩니다.

const UserProfile: React.FC = () => {
  const user = MyStore.useState(s => s.user);
}

상태 수정

저장소의 상태를 업데이트하려면 update 메서드를 사용합니다.

const setUser = (user: User) => {
  MyStore.update((s, o) => {
    s.user = user;
  });
}

update 함수는 상태의 Draft를 변경하여 작동합니다. 그런 다음 해당 초안을 처리하여 새 상태를 생성합니다.

일반적으로 상태 돌연변이는 위험 신호를 발생시키지만 Pullstate의 마법은 Immer 이라는 정말 흥미로운 프로젝트에서 나옵니다. Immer는 본질적으로 객체를 프록시한 다음 해당 객체의 돌연변이를 새로운 객체로 바꿉니다(제 경험이 제한적임). vdom이 새로운 DOM 트리를 파악하기 위해 diffing을 수행하는 방법의 일종.

이것은 매우 강력하고 간단하지만 몇 가지 문제가 있습니다. 첫째, 위의 s 값에 있는 개체에 대한 참조 비교는 실제로 Proxy 개체이기 때문에 실패합니다. 즉, 다음과 같이 하면 작동하지 않습니다.

MyStore.update(s => {
  s.project = s.projects.find(p => p === newProject)
});

대신 프록시되지 않은 원래 상태를 포함하는 위의 두 번째 인수o를 사용하십시오. 또 다른 문제는 update 함수에서 아무 것도 반환하지 않도록 하는 것입니다.

다음 단계

Pullstate를 사용한 후에는 모든 Ionic React 개발자와 다른 React UI 라이브러리와 함께 Capacitor을 사용하는 개발자에게 권장하지 않는 데 어려움을 겪을 것입니다.

저는 Pullstate가 소규모 프로젝트에서는 단순하지만 훨씬 더 복잡한 프로젝트로 확장할 수 있는 것 사이의 훌륭한 중간 지점이라고 생각합니다. 대규모 프로젝트의 경우 일종의 redux 리듀서에서 영감을 받은 조직을 위해 여러 저장소를 병렬로 만들 수 있습니다.

Pullstate에는 async actions 비동기 상태 상용구(예: 성공 및 실패 상태 처리)를 줄이기 위한 몇 가지 편의 도우미가 함께 제공되지만 아직 광범위하게 사용하지는 않았습니다.

다음 목록은 재사용 가능하고 메모화된 선택기를 구축하기 위해 reselect과 같은 작업을 수행하는 방법을 탐색하는 것입니다.

어떻게 생각해? 풀스테이트를 사용해 보셨습니까? 댓글로 공유해주세요!