React基础学习-Day06

zustand基本使用方式

1.基础使用

基本使用 zustand 的步骤包括创建状态存储和在组件中使用这些状态和更新函数。以下是一个基础的示例，演示如何使用 zustand 来管理一个简单的计数器状态。

安装

首先，确保你的项目中已经安装了 zustand：

bash 复制代码

npm install zustand

或者使用 yarn：

bash 复制代码

yarn add zustand

创建和使用状态存储

创建状态存储：

使用 create 函数来创建一个状态存储。在回调函数中，定义状态对象及其更新函数。

jsx 复制代码

// counterStore.js

import create from 'zustand';

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

export default useCounterStore;

在这个示例中：

count 是状态的初始值，初始化为 0。
increment 和 decrement 是更新函数，分别用于增加和减少 count 的值。

在组件中使用状态：

在需要使用状态的 React 组件中，使用 useCounterStore Hook 来获取状态和更新函数。然后，可以直接在组件中使用这些函数来更新状态。

jsx 复制代码

import React from 'react';
import useCounterStore from './counterStore';

const CounterComponent = () => {
  const { count, increment, decrement } = useCounterStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default CounterComponent;

在这个组件中：

使用 useCounterStore Hook 来获取 count 和 increment、decrement 更新函数。
每当按钮被点击时，对应的更新函数将被调用，从而更新 count 的值。

总结

使用 zustand 可以简化和管理 React 应用程序中的状态。通过 create 函数创建状态存储，定义状态和更新函数。然后，在组件中使用相应的 Hook 来获取和更新状态，从而实现组件之间的状态共享和管理。这种方式不仅简洁直观，而且基于 React Hooks，适用于函数组件中的状态管理。

当然可以，请稍等。

以下是带有保留专用名词的翻译：

2.切片模式

在 Zustand 中，切片模式是一种将主要存储区分割为较小、更易管理的存储单元的技术。每个存储单元负责特定的状态和操作，有助于保持模块化并随着应用程序的增长改善代码组织。

示例切片

以下是如何使用 Zustand 创建和组合单独切片的示例：

Fish 切片

javascript 复制代码

// fishSlice.js
export const createFishSlice = (set) => ({
  fishes: 0,
  addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
});

Bear 切片

javascript 复制代码

// bearSlice.js
export const createBearSlice = (set) => ({
  bears: 0,
  addBear: () => set((state) => ({ bears: state.bears + 1 })),
  eatFish: () => set((state) => ({ fishes: state.fishes - 1 })),
});

合并切片成为绑定存储

javascript 复制代码

// useBoundStore.js
import { create } from 'zustand';
import { createBearSlice } from './bearSlice';
import { createFishSlice } from './fishSlice';

export const useBoundStore = create((set) => ({
  ...createBearSlice(set),
  ...createFishSlice(set),
}));

在 React 组件中的使用

然后，您可以在 React 组件中使用 useBoundStore 来访问和更新组合状态：

jsx 复制代码

import React from 'react';
import { useBoundStore } from './useBoundStore';

function App() {
  const bears = useBoundStore((state) => state.bears);
  const fishes = useBoundStore((state) => state.fishes);
  const addBear = useBoundStore((state) => state.addBear);

  return (
    <div>
      <h2>熊的数量：{bears}</h2>
      <h2>鱼的数量：{fishes}</h2>
      <button onClick={() => addBear()}>添加一只熊</button>
    </div>
  );
}

export default App;

更新多个切片

如果需要同时更新多个切片，您可以创建一个组合操作：

javascript 复制代码

// createBearFishSlice.js
export const createBearFishSlice = (set, get) => ({
  addBearAndFish: () => {
    get().addBear();
    get().addFish();
  },
});

将所有商店合并在一起与以前相同。

js 复制代码

import { create } from 'zustand'
import { createBearSlice } from './bearSlice'
import { createFishSlice } from './fishSlice'
import { createBearFishSlice } from './createBearFishSlice'

export const useBoundStore = create((...a) => ({
  ...createBearSlice(...a),
  ...createFishSlice(...a),
  ...createBearFishSlice(...a),
}))

添加中间件

您还可以将中间件应用于组合存储，增强其功能：

javascript 复制代码

// useBoundStore.js with middleware
import { create } from 'zustand';
import { createBearSlice } from './bearSlice';
import { createFishSlice } from './fishSlice';
import { persist } from 'zustand/middleware';

export const useBoundStore = create(
  persist(
    (set) => ({
      ...createBearSlice(set),
      ...createFishSlice(set),
    }),
    { name: 'bound-store' }
  )
);

中间件解释：

在上下文中使用 persist 中间件时，它通常会将状态持久化到浏览器的本地存储中，例如使用 localStorage。具体来说，它将状态数据序列化为字符串并存储在浏览器提供的持久化存储中，以确保即使在页面刷新或关闭后，数据仍然可以被读取和恢复。

主要点概述：

localStorage:
- localStorage 是浏览器提供的一个持久化存储机制，允许网页存储键值对数据。
- 使用 persist 中间件时，它默认会将状态数据序列化为 JSON 字符串，并存储在 localStorage 中。
数据位置:
- 持久化的数据存储在浏览器的 localStorage 中，与当前网站域名相关联。
- 数据以键值对的形式存储，键是配置中指定的名称（例如 { name: 'bound-store' } 中的 'bound-store'）。
持久化机制:
- 当应用程序使用 set 函数来更新 Zustand 中的状态时，persist 中间件会捕获这些更新，并将新的状态数据序列化后存储到 localStorage。
- 在页面刷新或重新加载后，可以通过读取 localStorage 中相应的键来恢复存储的状态数据，从而实现数据的持久化和恢复功能。
配置选项:
- persist 中间件的配置选项允许您指定存储的名称、存储路径或其他相关设置，以便更精细地控制数据的存储和管理。

通过使用 persist 中间件，您可以轻松地在 Zustand 状态管理中实现数据的持久化，这对于需要在用户会话之间保持状态或保存用户偏好设置的应用程序特别有用。

总结

Zustand 中的切片模式使您能够在 React 应用程序中保持可扩展和组织良好的状态管理方法。通过将主存储分解为更小、专注的切片，您可以提高模块化程度、简化测试并增强代码库的可维护性。这是管理复杂应用程序状态的强大模式。

3.create函数

在 Zustand 中，create 函数用于创建状态存储。create 函数的第一个参数是一个状态创建器（state creator）函数。这个状态创建器函数接收一组参数，这些参数用于管理和修改状态。通常，这些参数包括 set、get 和其他可能的工具函数。

状态创建器函数的参数列表

set:
- 用于更新状态的函数。
- 典型的用法是 set((state) => ({ ...state, someProperty: newValue }))，它接收一个函数，这个函数的参数是当前的状态，返回值是新的状态部分对象。
get:
- 用于获取当前状态的函数。
- 可以通过 get() 来访问当前的状态值，常用于读取状态的当前值以便在更新时参考。
api:
- 代表整个 Zustand 存储 API 的对象。
- 包含其他有用的方法和工具，可以用于更高级的状态管理需求。

参数列表示例

假设我们有一个简单的状态存储，用于管理一个计数器和一个名称属性，状态创建器函数的参数列表如下：

javascript 复制代码

import create from 'zustand';

const useStore = create((set, get, api) => ({
  count: 0,
  name: 'Zustand',
  increment: () => set((state) => ({ count: state.count + 1 })),
  reset: () => {
    const currentName = get().name;
    set({ count: 0, name: 'Zustand' });
    console.log('Reset done for', currentName);
  },
  apiFunction: () => {
    console.log('Store API:', api);
  }
}));

export default useStore;

参数详细说明

set:
- 类型：(partial: Partial<State> | ((state: State) => Partial<State>)) => void
- 用途：更新状态。
- 示例：set((state) => ({ count: state.count + 1 }))
get:
- 类型：() => State
- 用途：获取当前状态。
- 示例：const currentCount = get().count
api:
- 类型：StoreApi<State>
- 用途：访问存储 API。
- 示例：api.getState()

示例解释

count 和 name 是状态属性。
increment 是一个方法，使用 set 函数更新 count。
reset 方法使用 get 函数读取当前的 name，然后重置 count 和 name。
apiFunction 方法展示了如何使用 api 对象。

总结

Zustand 的 create 函数接受一个状态创建器函数，该函数可以接收三个参数：set、get 和 api。这些参数提供了更新和获取状态的功能，以及对 Zustand 存储 API 的访问。通过这些工具，您可以灵活地管理状态并实现复杂的状态逻辑。

5.create中的参数API

在 Zustand 中，api 对象是整个存储 API，它提供了对状态存储的全面控制。这个 api 对象可以通过状态创建器函数的第三个参数访问。api 对象包括以下常见方法和属性：

setState(partialState, replace?):
- 更新状态。
- partialState 是一个部分状态对象或函数，它接收当前状态并返回部分状态对象。
- replace 是一个可选的布尔值，指示是否替换整个状态。
getState():
- 获取当前状态。
- 返回当前状态对象。
subscribe(listener):
- 订阅状态变化。
- listener 是一个函数，每当状态改变时都会被调用。
- 返回一个取消订阅的函数。
destroy():
- 销毁存储，清理所有订阅。

示例代码

javascript 复制代码

import create from 'zustand';

const useStore = create((set, get, api) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  reset: () => {
    const currentState = get();
    set({ count: 0 });
    console.log('State has been reset:', currentState);
  },
  printApi: () => {
    console.log('Store API:', api);
  }
}));

export default useStore;

使用说明

setState(partialState, replace?):

用于更新状态。

示例：

javascript 复制代码

api.setState({ count: 10 });
api.setState((state) => ({ count: state.count + 1 }));
api.setState({ count: 0 }, true);  // 完全替换状态

getState():
- 用于获取当前状态。
- 示例：
  javascript 复制代码
```
const state = api.getState();
console.log('Current state:', state);
```

subscribe(listener):

用于订阅状态变化。

示例：

javascript 复制代码

const unsubscribe = api.subscribe((newState) => {
  console.log('State changed:', newState);
});

// 取消订阅
unsubscribe();

destroy():
- 用于销毁存储，清理所有订阅。
- 示例：
  javascript 复制代码
```
api.destroy();
```

总结

api 对象提供了对 Zustand 存储的全面控制，通过它可以更新状态、获取当前状态、订阅状态变化以及销毁存储。了解这些方法有助于更灵活和高效地管理 Zustand 状态。