状態管理は、最新の Web 開発、特に複雑なアプリケーションにおいて重要な側面です。これには、時間の経過とともに変化する可能性のあるデータを処理し、このデータがアプリケーション全体で一貫して表現されるようにすることが含まれます。効果的な状態管理は、アプリケーションの予測可能性と保守性の向上につながります。
Zustand は、React アプリケーション向けの小型、高速、スケーラブルな状態管理ソリューションです。 Jared Palmer と Daishi Kata によって作成された Zustand は、他のソリューションに比べて状態管理の煩雑さを軽減する、シンプルで直感的な API を提供します。
Zustand について詳しく説明する前に、Web アプリケーションのさまざまな種類の状態を理解しましょう。
Zustand はローカル状態とグローバル状態の両方の管理に優れており、リモート状態管理のソリューションと統合できます。
Zustand の使用を開始するには、まず npm、yarn、または pnpm 経由でインストールします。
npm install zustand # or yarn add zustand # or pnpm add zustand
Zustand には、それを際立たせるいくつかの機能が付属しています:
Zustand の基本的な実装を見てみましょう:
import { create } from 'zustand'
const useStore = create((set) => ({
bears: 0,
increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
removeAllBears: () => set({ bears: 0 }),
}))
function BearCounter() {
const bears = useStore((state) => state.bears)
return <h1>{bears} around here...</h1>
}
function Controls() {
const increasePopulation = useStore((state) => state.increasePopulation)
return <button onClick={increasePopulation}>one up</button>
}
この例では、bears 状態とそれを変更する 2 つのアクションを持つストアを作成します。 BearCounter コンポーネントと Controls コンポーネントは、useStore フックを使用して状態にアクセスし、変更できるようになります。
Zustand を他の一般的な状態管理ソリューションと比較してみましょう:
Zustand の長所:
短所:
Zustand の長所:
短所:
Zustand の長所:
短所:
Zustand のシステム設計は、いくつかの重要な原則に基づいています。
This design allows Zustand to be both simple and powerful, providing excellent performance even in large applications.
Zustand makes it easy to persist state, which is crucial for many applications. Here's an example using the persist middleware:
import { create } from 'zustand'
import { persist } from 'zustand/middleware'
const useStore = create(persist(
(set, get) => ({
fishes: 0,
addAFish: () => set({ fishes: get().fishes + 1 }),
}),
{
name: 'food-storage', // unique name
getStorage: () => localStorage, // (optional) by default, 'localStorage' is used
}
))
This will automatically save the state to localStorage and rehydrate it when the app reloads.
One of Zustand's strengths is that it can be used outside of React components. This is particularly useful for integrating with other parts of your application or for testing:
const { getState, setState } = useStore
// Getting state
console.log(getState().bears)
// Setting state
setState({ bears: 10 })
// Using actions
getState().increasePopulation()
Let's look at some real-world examples of using Zustand:
import { create } from 'zustand'
const useAuthStore = create((set) => ({
user: null,
isAuthenticated: false,
login: (userData) => set({ user: userData, isAuthenticated: true }),
logout: () => set({ user: null, isAuthenticated: false }),
}))
// Usage in a component
function LoginButton() {
const { isAuthenticated, login, logout } = useAuthStore()
const handleAuth = () => {
if (isAuthenticated) {
logout()
} else {
// Simulate login
login({ id: 1, name: 'John Doe' })
}
}
return (
<button onClick={handleAuth}>
{isAuthenticated ? 'Logout' : 'Login'}
</button>
)
}
import { create } from 'zustand'
const useCartStore = create((set) => ({
items: [],
addItem: (item) => set((state) => ({ items: [...state.items, item] })),
removeItem: (itemId) => set((state) => ({
items: state.items.filter((item) => item.id !== itemId),
})),
clearCart: () => set({ items: [] }),
total: 0,
updateTotal: () => set((state) => ({
total: state.items.reduce((sum, item) => sum + item.price, 0),
})),
}))
// Usage in components
function CartSummary() {
const { items, total, removeItem } = useCartStore()
return (
<div>
{items.map((item) => (
<div key={item.id}>
{item.name} - ${item.price}
<button onClick={() => removeItem(item.id)}>Remove</button>
</div>
))}
<div>Total: ${total}</div>
</div>
)
}
import { create } from 'zustand'
import { persist } from 'zustand/middleware'
const useThemeStore = create(persist(
(set) => ({
theme: 'light',
toggleTheme: () => set((state) => ({
theme: state.theme === 'light' ? 'dark' : 'light',
})),
}),
{
name: 'theme-storage',
}
))
// Usage in a component
function ThemeToggle() {
const { theme, toggleTheme } = useThemeStore()
return (
<button onClick={toggleTheme}>
Switch to {theme === 'light' ? 'dark' : 'light'} mode
</button>
)
}
Zustand offers a refreshing approach to state management in React applications. Its simplicity, flexibility, and performance make it an excellent choice for both small and large projects. By reducing boilerplate and providing a straightforward API, Zustand allows developers to focus on building features rather than managing complex state logic.
While it may not have the extensive ecosystem of some older state management solutions, Zustand's design principles and ease of use make it a compelling option for modern React development. Its ability to work outside of React components and easy integration with persistence solutions further extend its utility.
For many React applications, Zustand strikes an excellent balance between simplicity and power, making it worth considering for your next project.
Zustand also handles asynchronous functions/code really well and without the need for any Middleware setup.
Let's talk a bit about that:
One of Zustand's strengths is its simplicity in handling asynchronous operations without the need for additional middleware or complex setups. This makes it particularly easy to work with API calls, data fetching, and other asynchronous tasks.
Zustand's approach to asynchronous code is straightforward:
Here's an example of how to implement asynchronous code in Zustand:
import { create } from 'zustand'
const useUserStore = create((set) => ({
user: null,
isLoading: false,
error: null,
fetchUser: async (userId) => {
set({ isLoading: true, error: null });
try {
const response = await fetch(`https://api.example.com/users/${userId}`);
if (!response.ok) throw new Error('Failed to fetch user');
const userData = await response.json();
set({ user: userData, isLoading: false });
} catch (error) {
set({ error: error.message, isLoading: false });
}
},
}));
// Usage in a component
function UserProfile({ userId }) {
const { user, isLoading, error, fetchUser } = useUserStore();
React.useEffect(() => {
fetchUser(userId);
}, [userId]);
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
if (!user) return null;
return (
<div>
<h1>{user.name}</h1>
<p>Email: {user.email}</p>
</div>
);
}
In this example:
Unlike Redux, which often requires middleware like Redux Thunk or Redux Saga for handling async operations, Zustand's approach is much more straightforward. This simplicity can lead to less boilerplate and a gentler learning curve, especially for developers new to state management.
MobX and Recoil also offer ways to handle async operations, but Zustand's approach might be considered more intuitive due to its direct use of async/await syntax without additional abstractions.
Zustand の非同期コードの処理は、そのシンプルさと柔軟性の哲学を体現しています。 Zustand では、開発者が特別な構文やミドルウェアを使用せずにストア内で非同期関数を直接作成できるようにすることで、コードベースをクリーンで読みやすい状態に保ちながら、複雑な状態操作の管理を容易にします。
この非同期コードへのアプローチは、小さなバンドル サイズや簡単なセットアップなどの Zustand の他の機能と組み合わせることで、あらゆる規模のプロジェクト、特に重要な非同期状態管理を伴うプロジェクトにとって優れた選択肢となります。
この「ちょっとしたガイド」が、グローバル アプリケーションの状態を管理する方法を考えている人にとって役に立ち、洞察力があれば幸いです。
ありがとうございます。コーディングを楽しんでください。
私のウェブサイト https://www.ricardogesteves.com をご覧ください
フォローしてください @ricardogesteves
X(ツイッター)
フルスタック開発者 |直感的でインパクトのあるユーザー エクスペリエンスの作成に情熱を注ぐ |ポルトガルのリスボンに拠点を置く?? - リカルド・ジェスティーブス
github.com
以上がズスタンド、いつ、どのように、そしてなぜの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
