更强大的React 状态管理库Zustand使用详解

目录
  • 介绍
  • 创建项目项目
  • 安装项目依赖
  • 创建项目结构
  • 设置环境变量
  • 服务
  • 设置 store
  • 清除/重置存储

介绍

在这篇文章中,我会介绍 Zustand 在实际项目中的使用。

我会构建一个 GitHub 用户搜索项目,在项目中通过调用 GitHub API 来实现搜索用户的功能。我还会并演示如何直接从 Zustand 存储中进行 API 调用,并将状态持久化到 sessionStorage 或 localStorage 中。

完成效果如下:

创建项目项目

首先,我们需要创建一个新的 React 应用程序。

我们需要在终端中运行命令来下面的命令来创建项目:

npx create-react-app github-user-search --template typescript

这行命令会利用 CRA 创建一个常规的 typescript react 项目。

安装项目依赖

创建项目后,我们需要进入该项目文件夹中。

cd github-user-search

并在终端中运行以下命令来安装项目所需要的依赖项:

npm i zustand @chakra-ui/react @emotion/react @emotion/styled react-icons react-router-dom axios framer-motion pluralize query-string react-helmet-async react-hook-form react-paginate
  • zustand:状态管理库。
  • @chakra-ui/react:UI 库。
  • @emotion/react:CSS-in-JS 库。
  • @emotion/styled:CSS-in-JS 库。
  • react-icons:图标库。
  • react-router-dom:路由库。
  • axios:HTTP 请求库。
  • framer-motion:动画库。
  • pluralize:单词处理库。
  • query-string:URL 查询字符串库。
  • react-helmet-async:React 异步线程安全库。
  • react-hook-form:React 表单库。
  • react-paginate:React 分页库。

创建项目结构

安装好项目依赖后,我们需要创建项目所需要的目录结构。

项目目录结构如下:

src
├── index.tsx
├── assets
├── container
├── components
├── pages
├── routes
├── services
├── store
└── theme

设置环境变量

创建项目结构后,我们需要创建环境变量。

在项目根目录中创建一个 .env 文件,并在其中添加以下变量:

REACT_APP_GITHUB_API_URL=https://api.github.com

服务

创建环境变量后,我们需要创建服务。

在项目的 services 文件夹中创建一个 githubService.ts 文件,并添加以下代码:

import axios from 'axios';
import qs from 'query-string';
const github = axios.create({
    baseURL: process.env.REACT_APP_GITHUB_API_URL,
});
interface IGet {
    url: string;
    query?: Record<string, any>;
}
const get = async <T>({ url, query = {} }: IGet): Promise<T> => {
    const queryString = `?${qs.stringify(query)}`;
    const response = await github.get(`${url + queryString}`);
    return response.data;
};
const methods = { get };
export default methods;

设置 store

接下来,我们将建立我们的 Github store。我们将实现 Zutsand persist 方法来将我们的状态持久化到 sessionStorage 或 localStorage 中。

在 stores/github.ts 中添加代码:

import create from 'zustand';
import { stringify } from 'query-string';
import { persist } from 'zustand/middleware';
import methods from 'services/github';
import { IUserDetails, ISearchResonse, IGithubStore } from 'stores/types';
export const githubStore = create(
  persist<IGithubStore>(
    (set, get) => ({
      isLoading: false,
      cached_users_details: [], // to cache users details
      query: { page: 1, per_page: 20 },
      search: async (query) => {
        try {
          set(() => ({ isLoading: true }));
          window.history.pushState('', '', `?${stringify(query)}`);
          const data = await methods.get<ISearchResonse>({
            url: '/search/users',
            query,
          });
          set(() => ({ data, query, isLoading: false }));
        } catch (err: any) {
          const error =
            err?.message || err?.data?.message || 'Unexpected network error.';
          set(() => ({ isLoading: false, error }));
        }
      },
      getUser: async (username) => {
        try {
          set(() => ({ isLoading: true }));
          // check if user is already cached
          const userDetails = get().cached_users_details.find(
            (u) => u.login === username
          );
          if (userDetails) {
            set(() => ({ userDetails, isLoading: false }));
          } else {
            const userInfo = await methods.get<IUserDetails>({
              url: `/users/${username}`,
            });
            set((state) => ({
              cached_users_details: [...state.cached_users_details, userInfo],
              userDetails: userInfo,
              isLoading: false,
            }));
          }
        } catch (err: any) {
          const error =
            err?.message || err?.data?.message || 'Unexpected network error.';
          set(() => ({ isLoading: false, error }));
        }
      },
    }),
    {
      name: 'search-storage',
      getStorage: () => sessionStorage,
    }
  )
);

我们能够对 GitHub api 进行异步调用,并直接从我们的 store 很好地处理响应,而无需使用额外的中间件。

我们还缓存了我们的用户详细信息,这样我们就不必再次调用 API 来再次获取相同的用户详细信息。我们还将我们的状态持久化到会话存储中。

我们还可以通过将 getStorage 方法的返回值更改为 localStorage,来将我们的状态持久化到 localStorage 中。

清除/重置存储

目前,Zustand 没有关于清除/重置存储开箱即用的方法。

我们可以通过向我们的 store 添加一个 clear/reset 方法,将我们的状态重置回初始状态并调用 sessionStorage 或 localStorage clear() 方法保持数据的同步。

const initialState = {
  data: undefined,
  userDetails: undefined,
  cached_users_details: [],
  query: { page: 1, per_page: 20 },
  isLoading: false,
  error: undefined,
};
export const githubStore = create(
  persist<IGithubStore>(
    (set, get) => ({
      ...initialState,
      ...
      clear: () => {
        set(() => (initialState));
        sessionStorage.clear(); // or localStorage.clear();
      },
   })
  )
);

本文主要关注的是 Zustand 状态管理部分,UI 部分就不展开了。

以上就是更强大的React 状态管理库Zustand使用详解的详细内容,更多关于React 状态管理库Zustand的资料请关注我们其它相关文章!

(0)

相关推荐

  • 在react中使用vue的状态管理的方法示例

    我是要介绍一个新的 react 全局共享状态管理器,它和 vue 组件的状态管理一起同工之妙. 马上体验 在 react 状态管理领域,react-redux 可谓是只手遮天了,基于 flux 思想实现,小巧,immutable 的思想让数据变化可控.但 immutable 所带来的编程代价太大了,如果你要更新一个深层结构的对象的某个节点,写作将会是极其麻烦的一件事,而且还保不准会出错.为了保证 immutable,redux 的 reducer 机制让开发者掉光了头发.于是有了类似 dva.r

  • 40行代码把Vue3的响应式集成进React做状态管理

    前言 vue-next是Vue3的源码仓库,Vue3采用lerna做package的划分,而响应式能力@vue/reactivity被划分到了单独的一个package中. 如果我们想把它集成到React中,可行吗?来试一试吧. 使用示例 话不多说,先看看怎么用的解解馋吧. // store.ts import { reactive, computed, effect } from '@vue/reactivity'; export const state = reactive({ count:

  • React各种状态管理器的解读及使用方法

    首先我们要先知道什么是状态管理器,这玩意是干啥的? 当我们在多个页面中使用到了相同的属性时就可以用到状态管理器,将这些状态存到外部的一个单独的文件中,不管在什么时候想使用都可以很方便的获取. react和vue有些不同,react没有自己专属的状态管理方式.它使用的其实是js相关的状态管理器.我们需要记住的是,视图可以引起状态的改变,而状态的改变会导致视图的二次渲染. 说了这么半天,那么我们在react中到底是怎样使用状态管理器的呢? redux闪亮登场 redux的前身技术是flux,他和fl

  • react18中react-redux状态管理的实现

    react的状态管理还是挺多的现在流行的有以下五种: Recoil MobX XState Redux Context 今天我们来讲一下react众多状态管理之一的redux,虽然这个我不太喜欢用,但是我觉得简单的状态管理谁都会,但是难的就是程序员的分水岭,所以今天来给大家讲一下redux. 下面我们来讲讲redux的优点: 可以在众多组件中传值,突破react单向数据流的限制 不仅支持react还支持vue等主流框架 当然是好用方便啦 接下来我们讲一下啥时候去使用他 在我们有好多组件,但是组件

  • 关于React状态管理的三个规则总结

    目录 前言 No.1 一个关注点 No.2 提取复杂的状态逻辑 No.3 提取多个状态操作 总结 前言 React 组件内部的状态是在渲染过程之间保持不变的封装数据.useState() 是 React hook,负责管理功能组件内部的状态. 我喜欢 useState() ,它确实使状态处理变得非常容易.但是我经常遇到类似的问题: 我应该将组件的状态划分为小状态,还是保持复合状态? 如果状态管理变得复杂,我应该从组件中提取它吗?该怎么做? 如果 useState() 的用法是如此简单,那么什么时

  • 基于React Hooks的小型状态管理详解

    目录 实现基于 React Hooks 的状态共享 使用感受 本文主要介绍一种基于 React Hooks 的状态共享方案,介绍其实现,并总结一下使用感受,目的是在状态管理方面提供多一种选择方式. 实现基于 React Hooks 的状态共享 React 组件间的状态共享,是一个老生常谈的问题,也有很多解决方案,例如 Redux.MobX 等.这些方案很专业,也经历了时间的考验,但私以为他们不太适合一些不算复杂的项目,反而会引入一些额外的复杂度. 实际上很多时候,我不想定义 mutation 和

  • 更强大的React 状态管理库Zustand使用详解

    目录 介绍 创建项目项目 安装项目依赖 创建项目结构 设置环境变量 服务 设置 store 清除/重置存储 介绍 在这篇文章中,我会介绍 Zustand 在实际项目中的使用. 我会构建一个 GitHub 用户搜索项目,在项目中通过调用 GitHub API 来实现搜索用户的功能.我还会并演示如何直接从 Zustand 存储中进行 API 调用,并将状态持久化到 sessionStorage 或 localStorage 中. 完成效果如下: 创建项目项目 首先,我们需要创建一个新的 React

  • Vue3中Vuex状态管理学习实战示例详解

    目录 引言 一.目录结构 二.版本依赖 三.配置Vuex 四.使用Vuex 引言 Vuex 是 Vue 全家桶重要组成之一,专为 Vue.js 应用程序开发的 状态管理模式 + 库 ,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 一.目录结构 demo/ package.json vite.config.js index.html public/ src/ api/ assets/ common/ components/ store/ index.

  • 使用Vue.observable()进行状态管理的实例代码详解

    随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是 vue.js 2.6 新增加的 Observable API ,通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况. 先看下官网描述,如下图 observable()方法,用于设置监控属性,这样就可以监控viewModule中的属性值的变化,从而就可以动态的改变某个元素中的值,监控属性的类型不变量而

  • Flutter状态管理Bloc使用示例详解

    目录 前言 两种使用模式 Cubit模式 最后 前言 目前Flutter三大主流状态管理框架分别是provider.flutter_bloc.getx,三大状态管理框架各有优劣,本篇文章将介绍其中的flutter_bloc框架的使用,他是bloc设计思想模式在flutter上的实现,bloc全程全称 business logic ,业务逻辑的意思,核心思想就是最大程度的将页面ui与数据逻辑的解耦,使我们的项目可读性.可维护性.健壮性增强. 两种使用模式 首先第一步引入插件: flutter_bl

  • Vue的状态管理vuex使用方法详解

    引入vuex 当访问数据对象时,一个 Vue 实例只是简单的代理访问.所以,如果有一处需要被多个实例间共享的状态,可以简单地通过维护一份数据来实现共享 const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const vmB = new Vue({ data: sourceOfTruth }) 现在当 sourceOfTruth 发生变化,vmA 和 vmB 都将自动的更新引用它们的视图.子组件们的每个实例也会

  • Vuex中状态管理器的使用详解

    目录 一.Vuex是什么? 二.什么时候使用Vuex 三.Vuex的核心概念和API 四.应用举例 五.vuex中各种辅助函数的用法,可以使我们更加方便的运用vuex 一.Vuex是什么? Vuex在Vue项目开发时使用的状态管理工具.简单来说,就是对Vue的应用中多个组件的共享状态进行集中式的管理(读/写) Vuex实现了一个单向数据流,在全局拥有一个State存放数据,当组件要更改State中的数据时,必须通过Mutation进行,Mutation同时提供了订阅者模式供外部插件调用获取Sta

  • react后台系统最佳实践示例详解

    目录 一.中后台系统的技术栈选型 1. 要做什么 2. 要求 3. 技术栈怎么选 二.hooks时代状态管理库的选型 context redux recoil zustand MobX 三.hooks的使用问题与解决方案 总结 一.中后台系统的技术栈选型 本文主要讲三块内容:中后台系统的技术栈选型.hooks时代状态管理库的选型以及hooks的使用问题与解决方案. 1. 要做什么 我们的目标是搭建一个适用于公司内部中后台系统的前端项目最佳实践. 2. 要求 由于业务需求比较多,一名开发人员需要负

  • React 状态管理工具优劣势示例分析

    目录 什么是状态管理? React 状态管理方案 方案介绍 方案对比 Source 相关建议 什么是状态管理? “状态”是描述应用程序当前行为的任何数据.这可能包括诸如“从服务器获取的对象列表”.“当前选择的项目”.“当前登录用户的名称”和“此模式是否打开?”等值. 众所周知,我们在研发一个复杂应用的过程中,一套好的状态管理方案是必不可少的,既能提升研发效率,又能降低研发维护成本,那么状态管理方案那么多,它们有什么不同,我们又该如何选择适合当前应用的方案呢? 本期将主要就 react 的常用状态

  • 详解vue组件化开发-vuex状态管理库

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 以上是vuex的官方文档对vuex的介绍,官方文档对vuex的用法进行了详细的说明.这里就不再细讲vuex的各个用法,写这篇博客的目的只是帮助部分同学更快地理解并上手vuex.

  • Vue状态管理库Pinia详细介绍

    目录 什么是 Pinia 如何使用 Pinia 认识 Store 定义一个store 使用 store 操作 State Getters 1. 认识和定义 Getters 2. 访问 Getters 认识和定义 Action 什么是 Pinia Pinia (西班牙语中的菠萝),本质上依然是一个状态管理的库,用于跨组件.页面进行状态共享. pinia 与 vuex 的区别: 更友好的TypeScript支持,Vuex之前对TS的支持很不友好 与 Vuex 相比,Pinia 提供了一个更简单的 A

随机推荐