React状态管理插件

在React项目中最常使用的状态管理是redux redux可以去看我之前redux学习笔记   redux还是比较麻烦的 所以推荐两个简单的状态管理库的基本使用

一，resso基本使用

 GitHub:GitHub - nanxiaobei/resso: 🪢 The simplest React state managerGitHub - nanxiaobei/resso: 🪢 The simplest React state manager

 我愿意称之为最简单的状态管理工具

1.下载resso

pnpm add resso
# or
yarn add resso
# or
bun add resso
# or
npm i resso

 2.创建store

import resso from 'resso'

const store = resso({
  count: 1,
  setCount() {
    store.count++
  }
})

export default store

3.页面使用

 

import store from '@/store'
export default function Home() {
  return (
    <div>
      <p>{store.count}</p>
      {/* 可以直接修改 */}
      <button onClick={() => store.count++}>+1</button>
      {/* 也可以调用方法 */}
      <button onClick={() => store.setCount()}>+1</button>
    </div>
  )
}

 

主打的就是一个简洁

二，zustand基本使用

官网 : Zustand Documentation

1.下载

pnpm add zustand
# or
yarn add zustand
# or
bun add zustand
# or
npm i zustand

 2.创建store

resso可以通过直接拿到值来进行更改 但是我们的zustand只能通过set来进行修改 

可以看到我们还是初始了一个变量count以及一个修改状态的方法 

import { create } from 'zustand'

type StoreType = {
  count: number,
  addCount: () => void
}

const useCountStore = create<StoreType>((set) => ({
  count: 1,
  addCount: () => set(state => ({ count: state.count + 1 }))
}))

export default useCountStore

3.页面使用

 页面使用有两种方式

第一种

// 引入仓库
import useCountStore from '@/store/index'
export default function Home() {
  // 初始化仓库
  const state = useCountStore()
  return (
    <div>
      <p>{state.count}</p>
      <button onClick={state.addCount}>+1</button>
    </div>
  )
}

 

这种取值方式跟resso差不多 但是我们不推荐这种 如果我们仓库存在多个值的情况下 我们修改其中一个 所有值会跟着一起更新

第二种 拿到对应的值跟对应的函数

// 引入仓库
import useCountStore from '@/store/index'
export default function Home() {
  // 拿到对应的值
  const count = useCountStore(state => state.count)
  // 拿到对应的方法
  const addCount = useCountStore(state => state.addCount)
  return (
    <div>
      <p>{count}</p>
      <button onClick={addCount}>+1</button>
    </div>
  )
}

 这种就跟react-redux取值差不多了

需要注意的一个点 就是store修改中的state也是传递一个新值去覆盖旧值 跟useState相似 所以在做数组对象的一些操作需要注意一下