乐闻世界logo
搜索文章和话题

How to use zustand to store the result of a query

Zustand
4 个月前提问
3 个月前修改
浏览次数57次

2个答案

1
2

当您使用Zustand来管理React应用中的状态时，您可以创建一个简单的全局状态存储来保存API查询的结果。以下是如何创建和使用Zustand存储的一个步骤：

1. 安装Zustand

首先，您需要在项目中安装Zustand（如果还没有的话）。

sh
npm install zustand

或者使用yarn：

sh
yarn add zustand

2. 创建一个Zustand存储

在项目中创建一个新的文件，比如 useStore.js，然后定义一个使用create方法的Zustand存储。

javascript
import create from 'zustand';

const useStore = create((set) => ({
  apiData: null, // 用于存储API查询结果的状态
  setApiData: (data) => set({ apiData: data }), // 一个更新apiData状态的action
}));

export default useStore;

3. 在组件中获取数据并更新存储

在组件中，您可以使用定义好的useStore来存储API查询结果。

javascript
import React, { useEffect } from 'react';
import axios from 'axios';
import useStore from './useStore'; // 引入我们创建的store

const SomeComponent = () => {
  const { apiData, setApiData } = useStore();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://your-api.com/data');
        setApiData(response.data); // 更新存储中的apiData
      } catch (error) {
        console.error('Fetching data failed: ', error);
        // 在这里处理错误，比如设置错误状态
      }
    };
    fetchData();
  }, [setApiData]); // 如果setApiData是一个稳定的函数，你可以省略依赖数组

  // 渲染数据或加载状态
  if (!apiData) return <div>Loading...</div>;

  return (
    <div>
      {/* 渲染接口查询返回的结果 */}
      {apiData.map((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  );
};

export default SomeComponent;

4. 使用API数据

您可以在应用的任何组件中通过调用useStore挂钩来访问apiData状态，并据此进行渲染。

示例说明

在上述例子中：

  • useStore定义了两个属性：apiData用于存储API数据，setApiData用于更新该数据。
  • SomeComponent组件在挂载时调用API，并使用setApiData方法将结果存储到全局状态。
  • 在组件中可以直接访问apiData来渲染接口数据。

这样，你就可以通过Zustand全局状态管理库在React应用中存储和访问API查询结果了。这种方法的好处是，状态管理逻辑非常简洁且易于测试和维护，同时允许跨组件共享和更新状态。

2024年6月29日 12:07 回复

以下是如何创建和使用Zustand存储的一个步骤：

1. 安装Zustand

首先，您需要在项目中安装Zustand（如果还没有的话）。

sh
npm install zustand

或者使用yarn：

sh
yarn add zustand

2. 创建一个Zustand存储

在项目中创建一个新的文件，比如 useStore.js，然后定义一个使用 create方法的Zustand存储。

javascript
import create from 'zustand';

const useStore = create((set) => ({
  apiData: null, // 用于存储API查询结果的状态
  setApiData: (data) => set({ apiData: data }), // 一个更新apiData状态的action
}));

export default useStore;

3. 在组件中获取数据并更新存储

在组件中，您可以使用定义好的 useStore来存储API查询结果。

javascript
import React, { useEffect } from 'react';
import axios from 'axios';
import useStore from './useStore'; // 引入我们创建的store

const SomeComponent = () => {
  const { apiData, setApiData } = useStore();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://your-api.com/data');
        setApiData(response.data); // 更新存储中的apiData
      } catch (error) {
        console.error('Fetching data failed: ', error);
        // 在这里处理错误，比如设置错误状态
      }
    };
    fetchData();
  }, [setApiData]); // 如果setApiData是一个稳定的函数，你可以省略依赖数组

  // 渲染数据或加载状态
  if (!apiData) return <div>Loading...</div>;

  return (
    <div>
      {/* 渲染接口查询返回的结果 */}
      {apiData.map((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  );
};

export default SomeComponent;

4. 使用API数据

您可以在应用的任何组件中通过调用 useStore挂钩来访问 apiData状态，并据此进行渲染。

示例说明

在上述例子中：

  • useStore定义了两个属性：apiData用于存储API数据，setApiData用于更新该数据。
  • SomeComponent组件在挂载时调用API，并使用 setApiData方法将结果存储到全局状态。
  • 在组件中可以直接访问 apiData来渲染接口数据。

这样，你就可以通过Zustand全局状态管理库在React应用中存储和访问API查询结果了。这种方法的好处是，状态管理逻辑非常简洁且易于测试和维护，同时允许跨组件共享和更新状态。

2024年6月29日 12:07 回复

你的答案