zustand - 异步支持

说明

zustand对异步的支持不需要特殊的操作，直接在函数中编写异步逻辑，最后只需要调用set方法传入新状态即可。

示例

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

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

// 创建store
// 函数参数必须返回一个对象，对象内部编写状态和方法
// set是用来修改状态的专有方法，必须调用来方法来修改数据
// set的语法1：参数是函数，需要用到老数据的场景使用
// set的语法2：参数直接是一个对象，不需要用到老的数据场景使用
const useStore = create((set) => {
  return {
    // 定义状态数据
    channelList: [],
    // 定义修改状态数据的方法
    fetchGetList: async () => {
      const res = await fetch(URL)
      const jsonRes = await res.json()
      // console.log(jsonRes)
      set({
        channelList: jsonRes.data.channels
      })
    }
  }
})

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

export default App