zustand切片模式

说明

当单个store比较大的时候，而且各部分功能相对独立，可以采用切片模式进行模块拆分组合，类似于模块化。将大的store拆分为小的store，维护起来比较方便。

好的做法是将拆分的子模块分别放在不同的文件中，合并的时候再引入。

示意图：

示例

import { useEffect } from "react"
import { create } from "zustand"

const URL = 'http://geek.itheima.net/v1_0/channels'

// 拆分子模块
const createCounterStore = (set) => {
  return {
    // 状态数据
    count: 0,
    // 修改数据的方法
    inc: () => {
      set((state) => ({ count: state.count + 1 }))
    }
  }
}

const createChannelStore = (set) => {
  return {
    // 状态数据
    channelList: [],
    // 定义修改状态数据的方法
    fetchGetList: async () => {
      const res = await fetch(URL)
      const jsonRes = await res.json()
      // console.log(jsonRes)
      set({
        channelList: jsonRes.data.channels
      })
    }
  }
}

// 合并，是固定语法
const useStore = create((...a) => {
  return {
    ...createCounterStore(...a),
    ...createChannelStore(...a)
  }
})

function App() {
  // 绑定store到组件
  // useStore()返回的是一个对象，对象中有数据和修改数据的方法
  const { count, inc, fetchGetList, channelList } = useStore()
  useEffect(() => {
    fetchGetList()
  }, [fetchGetList])
  return (
    <>
      <button onClick={inc}>{count}</button>
      <ul>
        {
          channelList.map(item => <li key={item.id}>{item.name}</li>)
        }
      </ul>
    </>
  )
}

export default App