가장 간단한 상태 튜토리얼-JS 튜토리얼-php.cn

가장 간단한 상태 튜토리얼

Patricia Arquette

풀어 주다： 2024-10-03 06:27:30

원래의

587명이 탐색했습니다.

Simplest Zustand Tutorial

Zustand는 Redux와 같은 보다 복잡한 솔루션의 대안으로 사용되는 작고 빠르며 확장 가능한 React용 상태 관리 라이브러리입니다. Zustand가 이렇게 많은 관심을 얻은 주된 이유는 Redux에 비해 작은 크기와 간단한 구문 때문입니다.

Zustand 설정 이해

먼저 Zustand와 TypeScript를 아직 설치하지 않았다면 설치해야 합니다.

npm install zustand
'or'
yarn add zustand

로그인 후 복사

Zustand는 매장을 정의하는 생성 기능을 제공합니다. 카운트 값을 저장하고 조작하는 기본 예를 살펴보겠습니다.

사용자 정의 후크가 있는 store.ts라는 파일을 만들어 보겠습니다. useCounterStore():

import { create } from "zustand"

type CounterStore = {
    count: number
    increment: () => void
    resetCount: () => void
}

export const useCounterStore = create<CounterStore>((set) => ({
    count: 0
    increment: () => set((state) => ({ count: state.count + 1 })),
    resetCount: () => set({ count: 0 })
}))

로그인 후 복사

이 예에서는:

count는 상태의 일부입니다.
increaseCount 및 ResetCount는 상태를 수정하는 작업입니다.
세트는 스토어 업데이트를 위해 Zustand에서 제공하는 기능입니다.

React 구성 요소에서 Store 사용

import React from 'react'
import { useCounterStore } from './store'

const Counter: React.FC = () => {
  const count = useCounterStore((state) => state.count) // Get count from the store
  const increment = useCounterStore((state) => state.increment) // Get the action

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increase Count</button>
    </div>
  )
}

export default Counter;

로그인 후 복사

여기서 Counter는 React 컴포넌트입니다. 보시다시피 useCounterState()는 카운트 및 증분에 액세스하는 데 사용됩니다.

다음과 같이 상태를 직접 가져오는 대신 상태를 구조 해제할 수 있습니다.

const {count, increment} = useCounterStore((state) => state)

로그인 후 복사

그러나 이 접근 방식은 성능을 저하시킵니다. 따라서 가장 좋은 방법은 이전에 표시된 것과 같이 상태에 직접 액세스하는 것입니다.

비동기 작업

Zustand에서는 비동기 작업을 수행하거나 서버에 API 요청을 호출하는 것도 매우 간단합니다. 다음 코드는 모든 것을 설명합니다.

export const useCounterStore = create<CounterStore>((set) => ({
    count: 0
    increment: () => set((state) => ({ count: state.count + 1 })),
    incrementAsync: async () => {
        await new Promise((resolve) => setTimeout(resolve, 1000))
        set((state) => ({ count: state.count + 1 }))
    },
    resetCount: () => set({ count: 0 })
}))

로그인 후 복사

JavaScript의 일반적인 비동기 함수처럼 보이지 않나요? 우선 비동기 코드를 실행한 후 주어진 값으로 상태를 설정합니다.

이제 반응 구성 요소에서 어떻게 사용할 수 있는지 살펴보겠습니다.

const OtherComponent = ({ count }: { count: number }) => {
  const incrementAsync = useCounterStore((state) => state.incrementAsync)

  return (
    <div>
      {count}
      <div>
        <button onClick={incrementAsync}>Increment</button>
      </div>
    </div>
  )
}

로그인 후 복사

React Component 외부에서 상태에 액세스하는 방법

지금까지는 React 구성 요소 내부의 상태에만 액세스했습니다. 하지만 React 구성 요소 외부에서 상태에 액세스하는 것은 어떻습니까? 예, Zustand를 사용하면 React 구성 요소 외부에서 상태에 액세스할 수 있습니다.

const getCount = () => {
  const count = useCounterStore.getState().count
  console.log("count", count)
}

const OtherComponent = ({ count }: { count: number }) => {
  const incrementAsync = useCounterStore((state) => state.incrementAsync)
  const decrement = useCounterStore((state) => state.decrement)

  useEffect(() => {
    getCount()
  }, [])

  return (
    <div>
      {count}
      <div>
        <button onClick={incrementAsync}>Increment</button>
        <button onClick={decrement}>Decrement</button>
      </div>
    </div>
  )
}

로그인 후 복사

여기서 getCount()가 getState()를 통해 상태에 액세스하는 것을 볼 수 있습니다

카운트도 설정할 수 있습니다.

const setCount = () => {
  useCounterStore.setState({ count: 10 })
}

로그인 후 복사

미들웨어 지속

Zustand의 지속 미들웨어는 일반적으로 localStorage 또는 sessionStorage를 사용하여 브라우저 세션 전반에 걸쳐 상태를 유지하고 복원하는 데 사용됩니다. 이 기능을 사용하면 페이지를 다시 로드한 후에도 또는 사용자가 브라우저를 닫았다가 다시 열 때에도 상태를 유지할 수 있습니다. 작동 방식과 사용 방법에 대한 자세한 설명은 다음과 같습니다.

지속의 기본 사용법

지속성을 사용하여 Zustand 스토어를 설정하는 방법은 다음과 같습니다.

import create from 'zustand';
import { persist } from 'zustand/middleware';

// Define the state and actions
interface BearState {
  bears: number;
  increase: () => void;
  reset: () => void;
}

// Create a store with persist middleware
export const useStore = create<BearState>(
  persist(
    (set) => ({
      bears: 0,
      increase: () => set((state) => ({ bears: state.bears + 1 })),
      reset: () => set({ bears: 0 }),
    }),
    {
      name: 'bear-storage', // Name of the key in localStorage
    }
  )
);

로그인 후 복사

상태는 localStorage의 "bear-storage" 키 아래에 저장됩니다. 이제 페이지를 새로 고치더라도 다시 로드해도 곰의 수가 유지됩니다.

기본적으로 지속은 localStorage를 사용하지만 sessionStorage 또는 다른 스토리지 시스템으로 변경할 수 있습니다. Zustand에는 상태 지속이라는 주제에 관해 다루어야 할 내용이 많이 있습니다. 이 주제에 대한 자세한 튜토리얼/게시물이 이 게시물 다음에 나올 것입니다.