react(笔记)6.1---基于zustand的useStore (reactx进阶)

---认识useStore

下载zustand:

npm i zustand

示例代码:

import { create } from "zustand"

const useStore  = create((set)=>{
  return{
    // 状态数据
    count:0,
    // 修改状态数据的方法
    inc:()=>{
      // 基于老数据进行修改
      set((state)=>({count:state.count+1}))
      // 基于新数据进行修改
      // set({count :100})
    }
  }
})

function App() {
  // 直接解构使用
 const {count , inc} = useStore()
  return (
    <div>
      <div>我是爹</div>
      <button onClick={inc}>{count}</button>
    </div>
  )
}

export default App

---异步请求

示例代码:

import { create } from "zustand"
import {useEffect} from 'react'
const useStore  = create((set)=>{
  return{
    // 状态数据
    messageList:[],
    // 异步方法
    getMessageList: async()=>{
      const res = await fetch('http://geek.itheima.net/v1_0/channels')
      const data =await res.json()
      // console.log(data.data.channels);
      set({messageList: data.data.channels})
    }
  }
})

function App() {
  // 直接解构使用
 const {messageList , getMessageList} = useStore()
 useEffect(()=>{
  getMessageList()
 },[getMessageList])
  return (
    <div>
      <div>我是爹</div>
     <ul>
     {messageList.map(item=> <li key={item.id}>{item.name}</li>)}
     </ul>
    </div>
  )
}

export default App

---切片模式(类似于modules)正规分包写法

--1.包目录结构:

--2.各个包的示例代码:

channelStore.jsx

// channelStore.jsx
const channelStore = ((set) => {
  return {
    // 状态数据
    messageList: [],
    // 异步方法
    getMessageList: async () => {
      const res = await fetch('http://geek.itheima.net/v1_0/channels')
      const data = await res.json()
      // console.log(data.data.channels);
      set({ messageList: data.data.channels })
    }
  }
})
export default channelStore

 counterStore.jsx

// counterStore.jsx
const counterStore = ((set) => {
  return {
    // 状态数据
    count: 0,
    // 修改状态数据的方法
    inc: () => {
      // 基于老数据进行修改
      set((state) => ({ count: state.count + 1 }))
      // 基于新数据进行修改
      // set({count :100})
    }
  }
})

export default counterStore

index.jsx

...a代表的是set以及其他传入参数

import { create } from "zustand"

// 导入子组件
import counterStore from "./modules/counterStore"
import channelStore from "./modules/channelStore"
// 创建useStore组合子模块
const useStore = create((...a) => {
  return {
    ...counterStore(...a),
    ...channelStore(...a)
  }
})
// 导出store
export default useStore

使用的主页面

import { useEffect } from 'react'
import useStore from './store'


function App() {
  // 直接解构使用
  const { count, inc, messageList, getMessageList } = useStore()
  useEffect(() => {
    getMessageList()
  }, [getMessageList])
  return (
    <div>
      <div>我是爹</div>
      <button onClick={inc}>{count}</button>
      <ul>
        {messageList.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  )
}

export default App