首页 > 其他分享 >React — zustand状态管理工具

React — zustand状态管理工具

时间:2024-03-16 19:15:10浏览次数:23  
标签:count zustand set asyncGetList 函数 create 管理工具 React const

zustand 是一个用于状态管理的简单而强大的库,它可以与 React 一起使用。它提供了一种简单的方式来管理组件的状态,并且遵循了 React Hooks 的使用规范。

使用 zustand 可以方便地创建和共享状态,同时还能够实现状态的订阅和更新。通过 zustand,你可以创建自定义的状态钩子,并在组件中使用这些钩子来获取状态并进行状态更新。

 

1.下载、创建、基础用法

npm install zustand
import './App.css';
import {create} from 'zustand'


//1.创建store
//注意事项:
//(1)函数参数必须返回一个对象,对象内部编写状态数据和方法
//(2)set方法是用来修改数据的专门方法 必须调用这个方法来修改数据
//语法1:参数是函数 需要用到老数据的情况
//语法2:参数直接是一个对象
const useStore= create((set)=>{  //create方法内部是一个函数

  return { //return一个对象
    count : 0, //存储的数据状态
    inc : ()=>{ //修改状态 是一个函数

      //语法1
      set((state)=>({
        count : state.count+1
      }))

      //语法2
      // set({count : 100})
    }
  }
})

//绑定store到组件
function App() {
 const {count,inc} = useStore()
  return (
    <div className="App">
      <button onClick={inc}>{count}</button>
    </div>
  );
}

export default App;

代码解析:

  1. create 方法接受一个函数作为参数,这个函数内部会接收一个名为set的函数作为参数。set 函数的作用是用来更新状态。

  2. 在这个函数内部,通过 return 返回了一个对象,这个对象包含了状态变量 count 和更新状态的函数 inc

  3. count 是一个存储数据状态的变量,初始值为 0

  4. inc 是一个函数,调用时将会通过 set 函数来更新状态。在这个例子中,它使用了函数式更新的方式,接受当前状态 state 作为参数,并返回一个新的状态对象,从而实现对 count 状态的加一操作。

  5. 最终,通过 create 方法返回的内容,我们可以在组件中使用 useStore 钩子来获取 count 状态和 inc 函数,并且在组件中进行状态的更新和管理。

2.异步支持

import { useEffect } from 'react';
import './App.css';
import {create} from 'zustand'

const URL ='http://xxxxxxs'

const useStore= create((set)=>{  //create方法内部是一个函数

  return { //return一个对象

    channelList : [],
    asyncGetList : async ()=>{
      const res = await fetch(URL)
      const jsonres = await res.json()
      console.log(jsonres)
      set({
        channelList : jsonres
      })
    }
  }
})

//绑定store到组件
function App() {
 const {count,inc ,asyncGetList,channelList} = useStore()
    useEffect(()=>{

      asyncGetList()
    },[asyncGetList])
  return (
    <div className="App">
      <button onClick={inc}>{count}</button>
    </div>
  );
}

export default App;

 

代码解析:

 

  1. create 方法用于创建一个新的 Zustand store。它接受一个回调函数作为参数,该回调函数会接收 set 方法作为参数,并返回一个包含状态和操作的对象。

  2. 在回调函数中,返回一个包含 channelListasyncGetList 的对象。channelList 用于存储频道列表,asyncGetList 是一个异步函数,用于从指定的 URL 获取数据并更新 channelList

  3. 在组件中使用 useStore 调用 create 创建的 Zustand store,获取到 asyncGetListchannelList

  4. 使用 useEffect 钩子在组件挂载后调用 asyncGetList 函数,以便获取频道列表数据。在 useEffect 的依赖数组中传入 asyncGetList,以确保只有在 asyncGetList 函数发生变化时才会重新触发效果。

  5. 需要注意的是,这段代码中的 URL 变量是一个占位符,实际项目中应该替换为真实的 API 地址。

 

3.切片模式

import { useEffect } from 'react';
import './App.css';
import {create} from 'zustand'


const createCounterStore = (set)=>{
  return {
    count : 0, //存储的数据状态
    inc : ()=>{ //修改状态 是一个函数

      //语法1
      set((state)=>({
        count : state.count+1
      }))
      //语法2
      // set({count : 100})
    },
  }
}
const createChannelStore = (set)=>{
  return {
    channelList : [],
    asyncGetList : async ()=>{
      const res = await fetch(URL)
      const jsonres = await res.json()
      console.log(jsonres)
      set({
        channelList : jsonres
      })
    }
  }
}

const useStore= create((...a)=>{  //create方法内部是一个函数
  return {
    ...createCounterStore(...a),
    ...createChannelStore(...a)
  }

})

//绑定store到组件
function App() {
 const {count,inc ,asyncGetList,channelList} = useStore()
    useEffect(()=>{

      asyncGetList()
    },[asyncGetList])
  return (
    <div className="App">
      <button onClick={inc}>{count}</button>
    </div>
  );
}

export default App;

代码解析:

  1. createCounterStore 函数用于创建一个存储计数器状态的 store。它接受 set 方法作为参数,并返回一个包含计数器状态和增加计数器函数的对象。

  2. createChannelStore 函数用于创建一个存储频道列表状态的 store。它同样接受 set 方法作为参数,并返回一个包含频道列表和异步获取频道列表数据的函数的对象。

  3. useStore 中使用 create 方法创建一个包含两个不同 store 的 Zustand store。通过使用 ... 操作符将 createCounterStorecreateChannelStore 的返回值合并到同一个对象中。

  4. 在组件中使用 useStore 调用 create 创建的 Zustand store,获取到 countincasyncGetListchannelList

标签:count,zustand,set,asyncGetList,函数,create,管理工具,React,const
From: https://www.cnblogs.com/qinlinkun/p/18077430

相关文章

  • 前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步
    目录ReactsetState调用的原理ReactsetState调用之后发生了什么?是同步还是异步?ReactsetState调用之后发生了什么?setState是同步还是异步的ReactsetState调用的原理在React中,setState方法是用于更新组件状态的重要方法。当setState被调用时,React会对组件进......
  • 除了Redux能不能使用zustand作为局部作用域的数据统一存储
    当然可以。Zustand作为一个轻量级的状态管理库,非常适合用来作为局部作用域的数据统一存储方案。相较于Redux,它更注重简洁性和易用性,并且充分利用了ReactHooks的特性。在使用Zustand时,你可以创建多个独立的store来管理不同组件或模块的本地状态。每个store都是自包含......
  • React — Class类组件
    一、Class类组件基础模板import'./App.css';import{Component}from'react'classCounterextendsComponent{//编写组件的逻辑代码//1.状态变量事件回调UI//2.定义状态变量state={count:0}setCount=()=>{this.setState({c......
  • iOS端创建ReactNative容器第一步:打出jsbundle和资源包
    react-native的打包流程是通过执行react-nativebundle指令进行的。 添加构建指令修改RN项目中的package.json文件,先其中添加构建命令build-release-ios和build-debug-ios"scripts":{"android":"react-nativerun-android","ios":"react-nativerun-ios"......
  • React-hook-form-mui(二):表单数据处理
    前言在上一篇文章中,我们介绍了react-hook-form-mui的基础用法。本文将着表单数据处理。react-hook-form-mui提供了丰富的表单数据处理功能,可以通过watch属性来获取表单数据。Demo下面是一个使用watch属性的例子:importReactfrom'react';import{useForm}from're......
  • React — forwardRef
    React.forwardRef是React提供的一个API,用于在函数组件中向子组件传递ref。通过使用React.forwardRef,我们可以将ref传递给函数组件内部的DOM节点或其他组件,从而实现对其进行操作。import{forwardRef}from"react"constSon=forwardRef((prop,ref)=>{return......
  • 使用 React Router 的 withRouter
    使用ReactRouter的withRouterReactRouter是React应用中常用的路由管理工具,它可以帮助我们管理页面之间的导航和状态。而withRouter则是ReactRouter提供的一个高阶组件,用于将路由相关的属性注入到组件中,使得我们可以在不同的组件中访问路由信息。1.安装Reac......
  • K8S资源管理工具-kor
     Kor是一个用于发现未使用的Kubernetes资源的工具。以下是Kor的安装和使用命令的整理:GitHub:https://github.com/yonahd/kor安装Kor下载二进制文件从Kor的GitHub仓库的Release页面下载适合您操作系统的二进制文件,并将其添加到系统的PATH中。使用Homebrew(......
  • React — useReducer使用方法
    1.定义一个reducer函数(根据不同的action返回不同的新状态)2.在组件中调用useReducer,并传入reducer函数和状态的初始值3.事件发生时,通过dispatch函数分发一个action对象(通知reducer)要返回哪个新状态并渲染UIimport{useReducer}from"react"//1.定义一个reducer函数,根据不......
  • vue3 中ref和reactive的区别讲解
    1.定于数据角度对比:ref用来定义:基本类型数据reactive用来定义:对象、或数组类型的数据备注:ref也可以用来定义对象或数组类型数据,它内部会自动通过reactive转为代理对象2.原理角度对比:ref通过Object.defineProperty()的get与set来实现响应式的(数据劫持)reactive通过......