Vue를 사용한 React의 전역 상태!

React에는 백만(또는 많은) 글로벌 상태 솔루션이 있습니다. 커뮤니티가 최선의 해결책을 찾기 위해 고군분투하고 있는 것 같습니다. 그래서 여기에서 나는 또 다른 사람과 함께 올 것입니다.

최근 Vue 3가 출시되었습니다. Vue가 또 다른 프레임워크라는 것을 알고 있지만 Vue는 프레임워크에 얽매이지 않는 방식으로 반응성을 해결합니다. 즉, React를 포함한 모든 곳에서 반응성을 사용할 수 있습니다.

먼저 스토어 파일을 생성해 보겠습니다.
store.js

import { reactive } from 'vue'

const store = reactive({
  count: 0
})

const increase = () => store.count++

export { store, increase }

Vue 구성 API가 reactive를 제외하고 무엇을 할 수 있는지에 대한 개요를 보려면 overview here 을 얻을 수 있습니다.

이제 store.js 파일에서 원하는 곳이면 어디든지 반응형store 객체와 increase 메서드를 가져올 수 있습니다. 문제는 React 함수가 업데이트된 값을 렌더링하기 위해 함수를 언제 다시 실행할지 모른다는 것입니다. 이를 처리하기 위해 사용자 지정 후크를 만들 것입니다.

useStore.js

import { useReducer, useEffect } from 'react'
import { watch } from 'vue'

function useStore(...stores) {
  const [ignored, forceUpdate] = useReducer(x => x + 1, 0)

  useEffect(() => {
    const stopWatch = watch(stores, forceUpdate)
    return stopWatch
  }, [])
}

export default useStore;

useState 또는 useReducer를 사용하여 update itself 구성 요소를 만들 수 있습니다. Vue Composition API로 매개변수stores를 관찰하고 모든 변경 사항에 대해 호출forceUpdate합니다. 또한 stopWatch 에서 useEffect 를 반환하여 구성 요소 마운트 해제 시 감시를 중지합니다. 모든 양의 상점이 우리의 useStore 에 전달될 수 있습니다.

범프.js

import React from "react";
import { increase } from './store'

export default function Bump() {
  return (
    <button onClick={increase}>+1</button>
  );
}

원한다면 여기에서 직접 store.count++ 할 수도 있습니다.

카운터.js

import React from "react";
import { store } from './store'
import useStore from './useStore'

export default function Counter() {
  useStore(store)

  return (
    <p>{store.count}</p>
  );
}

StackBlitz에 대한 완전한 예

후기

저는 실제로 이것이 전역 상태를 처리하는 훌륭하고 간단한 방법이라고 생각합니다. 추가 구성 요소, 전체 상태 개체의 축소, 발송 및/또는 완전한 재할당이 필요하지 않습니다. 이렇게 하면 깨끗한 방법으로 원하는 만큼의 글로벌 매장을 만들 수 있습니다.

전체 Vue를 가져오면 번들 크기가 더 커질 수 있습니다. 그러나 Vue의 반응성 모듈@vue/reactivity 및 @vue-reactivity/watch만 가져오거나 작은 번들에 대해 트리 쉐이킹에 의존할 수 있습니다.

이제 모든 개발자가 구성 요소 상태와 전역 상태를 처리하는 다른 방법을 원하는 것은 아니므로 동일한 프로젝트에서 React 방식과 Vue 방식이 혼동될 수 있습니다. 그러나 적어도 흥미롭고 재미있는 아이디어입니다.