How to access Zustand store outside a functional component?

在React项目中，Zustand是一种非常灵活的状态管理库，它允许我们在组件之外轻松访问和修改状态。以下是如何在功能组件之外访问Zustand存储库的步骤和示例：

步骤1: 创建一个Zustand存储库

首先，你需要创建一个Zustand存储库。这个存储库定义了你的应用状态和可以操作这些状态的函数。

javascript
import create from 'zustand';

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

在这个例子中，我们创建了一个简单的计数器存储库，它有 count状态和两个方法 increase和 decrease来修改状态。

步骤2: 在组件外部访问Zustand存储库

你可以直接从Zustand存储库导入 useStore并使用它来访问或修改状态，而无需在React组件内部。这在事件处理器、异步操作或任何其他逻辑中特别有用，这些逻辑不直接与UI组件绑定。

javascript
// 引入存储库
import { useStore } from './store';

// 访问状态
const count = useStore(state => state.count);

// 修改状态
const increaseCount = () => {
  useStore.getState().increase();
}

// 也可以直接设置状态
const setCountDirectly = (newCount) => {
  useStore.setState({ count: newCount });
}

示例：在事件处理器中使用

假设你有一个普通的JavaScript函数，需要在用户执行某个操作时更新状态，比如一个定时器或网络请求回调：

javascript
function onUserDidSomething() {
  // 直接调用存储库的方法来增加计数
  increaseCount();
}

// 或者在异步操作后设置状态
async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  setCountDirectly(data.newCount);
}

总结

使用Zustand，你可以非常灵活地在React组件外部管理和访问状态，这使得Zustand成为现代React应用中非常受欢迎的状态管理解决方案之一。通过将状态管理逻辑从组件中解耦，我们可以更容易地编写和维护清晰、可维护的代码。