React 状态管理-zustand

// 1.安装 zustand
npm install zustand

// 2.store/index.js - 创建store
import { create } from 'zustand'

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

const useStore = create((set) => {
  return {
    count: 0,
    // 同步
    ins: () => {
      return set(state => ({ count: state.count + 1 }))
    },
    decrease: (ploy) => {
      console.log(123, ploy);
      set(state => ({ count: state.count - ploy}))
    },
    channelList: [],
    // 异步
    fetchChannelList: async () => {
      const res = await fetch(URL)
      const jsonData = await res.json()
      set({channelList: jsonData.data.channels})
    }
  }
})

export default useStore

// 3.app.js - 绑定组件
import { useEffect } from 'react'
import useChannelStore'./store/channelStore'

function App() {
  const { channelList, fetchChannelList, ins, decrease } = useChannelStore()
 
  useEffect(() => {
    fetchChannelList()
  }, [fetchChannelList])

  return (
   	<>
		<ul>
	      {channelList.map((item) => (
	        <li key={item.id}>{item.name}</li>
	      ))}
	    </ul>
	    <div>{count}</div>
	    <button onClick={add}>增加</button>
	    <button onClick={() => decrease(10)}>减少</button>
	</>
  )
}

export default App

// 封装模式
import { create } from 'zustand'

// 创建counter相关切片
const createCounterStore = (set) => {
  return {
    count: 0,
    setCount: () => {
      set(state => ({ count: state.count + 1 }))
    }
  }
}

// 创建channel相关切片
const createChannelStore = (set) => {
  return {
    channelList: [],
    fetchGetList: async () => {
      const res = await fetch(URL)
      const jsonData = await res.json()
      set({ channelList: jsonData.data.channels })
    }
  }
}

// 组合切片
const useStore = create((...a) => ({
  ...createCounterStore(...a),
  ...createChannelStore(...a)
}))

// 组件使用
function App() {
  const {count, inc, channelList, fetchChannelList } = useStore()
  return (
    <>
      <button onClick={inc}>{count}</button>
      <ul>
        {channelList.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </>
  )
}

export default App

// 对接 DevTools, 简单的调试我们可以安装一个 名称为 simple-zustand-devtools 的调试工具

// 1.安装依赖
npm i simple-zustand-devtools -D

// 配置调试工具 channelStore.js
import create from 'zustand'
// 导入核心方法
import { mountStoreDevtool } from 'simple-zustand-devtools'
// 省略部分代码...

// 开发环境开启调试
if (process.env.NODE_ENV === 'development') {
  mountStoreDevtool('channelStore', useChannelStore)
}


export default useChannelStore

// 2.打开 React 调试工具 Components选项卡