Astro로 프레임워크 간 상태 공유

아스트로는 아일랜드 아키텍처로 설정되어 있고 동시에 실행multiple frameworks도 가능하기 때문에 상태 관리가 좀 어렵습니다.

예를 들어 React 또는 Vue에서와 같이 컨텍스트에만 의존할 수는 없습니다.

이것은 Nano Stores가 매우 편리한 곳입니다.
나는 그들에 대해 읽은 이후로 그들을 시험해보고 싶었습니다.

이 기사에서는 React와 Vue 구성 요소 간에 상태를 공유하는 방법을 살펴봅니다.

이 문서를 따르려면 다음GitHub branch을 시작점으로 삼으십시오.

Nano 저장소 설정

가장 먼저 설치해야 할 것은 실제 Nano Stores 패키지입니다.

npm i nanostores

스토어를 설정하려면 이 기본 패키지가 필요합니다.

계속해서 React 및 Vue 구성 요소에 이미 있는 카운터에 대한 저장소를 생성해 보겠습니다.
stores라는 폴더를 만들고 counter.js 파일을 추가했습니다.

여기에서 작은 값을 저장하는 데 사용할 수 있는 Nano Stores 원자를 활용할 수 있습니다.

import { atom } from 'nanostores';

const initialValue = { value: 0 };

const counter = atom(initialValue);

const increaseCounter = () => counter.set({ value: counter.get().value + 1 });

const decreaseCounter = () => counter.set({ value: counter.get().value - 1 });

export { counter, increaseCounter, decreaseCounter };

보시다시피 이것은 카운터 코드이지만 순수한 JavaScript로 추상화되었습니다.
나는 일을 더 읽기 쉽게 만들기 위해 객관적인 접근 방식을 사용했습니다.

그러나 이 코드 자체로는 아직 많은 작업을 수행하지 않습니다. 이를 위해 React 및 Vue 구성 요소를 조정해야 합니다.

다행스럽게도 두 프레임워크 모두 Nano Stores를 관리하기 위한 깔끔한 후크가 있습니다.

// React nano store
npm i nanostores @nanostores/react

// Vue nano store
npm i nanostores @nanostores/vue

이제 React 카운터를 열고 다음 코드로 조정하십시오.

import { useStore } from '@nanostores/react';
import { counter, increaseCounter, decreaseCounter } from '../store/counter';

export default function React() {
  const count = useStore(counter);
  const name = 'React';

  return (
    <div>
      <button onClick={decreaseCounter}>-</button>
      <pre>{count.value}</pre>
      <button onClick={increaseCounter}>+</button>
      <p>I'm a {name} component</p>
    </div>
  );
}

스토어 복제를 사용하기 위해 모든 기능을 추상화했습니다.
여기서 중요한 부분은 카운트를 useStore 로 초기화한다는 것입니다.

Vue 구성 요소의 경우 다음과 유사한 작업을 수행할 수 있습니다.

<script>
import { useStore } from '@nanostores/vue';
import { counter, increaseCounter, decreaseCounter } from '../store/counter';
export default {
  data() {
    const count = useStore(counter);
    return {
      count,
      name: 'Vue',
      increaseCounter,
      decreaseCounter,
    };
  },
};
</script>

<template>
  <button @click="decreaseCounter">-</button>
  <pre>{{ count.value }}</pre>
  <button @click="increaseCounter">+</button>
  <p>I'm a {{ name }} component</p>
</template>

그리고 그게 다야!

이제 Nano Stores에서 제공하는 완전히 다른 두 프레임워크 간에 공유 상태가 있습니다.

아래 비디오에서 결과 데모를 볼 수 있습니다.



전체 코드 샘플은 GitHub에서 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나