Zusstand를 사용한 React의 상태 관리에 대한 초보자 가이드

소개

상태 관리는 모든 React 애플리케이션에 중요하지만 Redux와 같은 기존 라이브러리는 때때로 과잉처럼 느껴질 수 있습니다. React를 위한 최소한의 강력한 상태 관리 솔루션인 Zustand를 만나보세요. 이 게시물에서는 Zustand가 개발자들에게 인기를 끄는 이유와 React 프로젝트에서 Zustand를 시작하는 방법에 대해 자세히 알아보겠습니다.

주스탠드란 무엇인가요?

Zustand는 간단하고 직관적으로 설계된 React용 상태 관리 라이브러리입니다. 가볍고 상용구가 많이 필요하지 않으므로 Redux나 React Context API보다 사용하기가 더 쉽습니다. React 애플리케이션에서 Zustand를 어떻게 사용할 수 있는지 살펴보겠습니다.

React에서 Zustand 설정하기

• Zustand 설치
  

  npm install zustand
  

• 스토어 만들기
  다음은 Zustand에서 상점을 만드는 방법에 대한 간단한 예입니다.
  

  import {create} from 'zustand';
  
  const useStore = create((set) => ({
    count: 0,
    increase: () => set((state) => ({ count: state.count + 1 })),
    decrease: () => set((state) => ({ count: state.count - 1 })),
  }));
  

• 구성 요소에서 Store 사용
  이제 React 구성 요소에서 저장소를 사용해 보겠습니다.
  

  import React from 'react';
  import { useStore } from './store';
  
  const Counter = () => {
    const { count, increase, decrease } = useStore();
  
    return (
      <div>
        <h1>{count}</h1>
        <button onClick={increase}>Increase</button>
        <button onClick={decrease}>Decrease</button>
      </div>
    );
  };
  
  export default Counter;
  

고급 Zustand 기능: get, getState

• Zustand는 get과 getState라는 두 가지 유용한 기능도 제공합니다. 이는 상태를 검색하고 언제든지 상태를 가져오는 데 사용됩니다

getState(): 이 함수는 다시 렌더링을 실행하지 않고도 매장의 현재 상태를 제공합니다.

import {create} from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
}));

// Accessing the current state using getState()
const count= useStore.getState().count;

// Reading the current state value
console.log(count); // This will log the current count

// Modifying the state using the actions
store.increase(); // This will increase the count
console.log(store.count); // This will log the updated count

get(): 이 함수를 사용하면 스토어 자체 내에서 상태에 직접 액세스할 수 있습니다. 설정 전이나 설정 후 상태를 확인하거나 수정해야 할 때 유용합니다.

import {create} from 'zustand';

const useStore = create((set, get) => ({
  count: 0,
  increase: (amount) => {
    const currentState = get(); // Access the current state using getState()
    console.log("Current count:", currentState.count); // Log the current count
    set((state) => ({ count: state.count + amount })); // Modify the state
  },
})); 

Zustand의 조각

• 애플리케이션이 성장함에 따라 상태를 더 작고 관리하기 쉬운 부분으로 구성하는 것이 좋습니다. 여기가 슬라이스가 작동하는 곳입니다. 슬라이스는 자체 작업 세트가 있는 모듈식 상태 부분입니다. 각 슬라이스를 자체 파일에 정의할 수 있으므로 코드가 더 깔끔하고 유지 관리가 쉬워집니다.

// counterStore.js
export const createCounterSlice = (set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
});

// userStore.js
export const createUserSlice = (set) => ({
  user: { name: 'John Doe' },
  setName: (name) => set({ user: { name } }),
});

// useBoundStore.js
import {create} from 'zustand';
import { createCounterSlice } from './counterStore';
import { createUserSlice } from './userStore';

export const useBoundStore = create((...a) => ({
  ...createCounterSlice(...a),
  ...createUserSlice(...a),
}));

내부 컴포넌트 사용 방법

import { useBoundStore } from './useBoundStore'
const App = () => {
  const { count, increase, decrease, user, setName } = useBoundStore();
}

Zustand의 지속되는 상태

• Zustand의 지속 미들웨어는 상태가 변경될 때 자동으로 localStorage에 상태를 저장하고 페이지가 다시 로드될 때 다시 로드하여 추가 작업 없이 상태가 동일하게 유지되도록 합니다.

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

const useStore = create(
  persist(
    (set) => ({
      count: 0,
      increase: () => set((state) => ({ count: state.count + 1 })),
      decrease: () => set((state) => ({ count: state.count - 1 })),
    }),
    {
      name: 'counter-storage', // The name of the key in localStorage
    }
  )
);

Zustand의 API에서 데이터 가져오기

• Zustand의 API에서 데이터를 가져오려면 스토어 내에서 API 호출을 처리하고 가져온 데이터, 로드 및 오류 상태로 상태를 업데이트하는 작업을 생성하세요.

import {create} from 'zustand';

const useStore = create((set) => ({
  users: [], // Array to store fetched users
  loading: false, // State to track loading status
  error: null, // State to track any errors during API call

  // Action to fetch users from the API
  fetchUsers: async () => {
    set({ loading: true, error: null }); // Set loading state to true and reset error
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const data = await response.json();
      set({ users: data, loading: false }); // Set users data and loading to false
    } catch (error) {
      set({ error: 'Failed to fetch users', loading: false }); // Set error if fetch fails
    }
  },
}));

export default useStore;

위 내용은 Zusstand를 사용한 React의 상태 관리에 대한 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!