React基础之zustand

安装

npm i zustand

1.函数参数必须返回一个对象，对象内部编写状态数据和修改状态方法

2.set函数是用于修改数据的专门方法，并且有两种情况

(1)参数是函数，常用于需要使用老数据的方法

(2)参数直接是一个对象

3.返回的是一个对象和修改对象状态的方法

import { create } from "zustand";

// 1.创建store

const useStore = create((set) => {

  return {

    // 状态数据

    count: 0,

    // 修改状态数据的方法

    inc: () => {

      set((state) => {

        return { count: state.count + 1 };

      });

      //set({count:100})

    }

  };

});

// 2.绑定store到组件

function App() {

  const { count, inc } = useStore();

  return (

    <div className="App">

      <button onClick={inc}>{count}</button>

    </div>

  );

}

export default App;

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

异步支持

 需要注意，在进行异步操作之后，需要调用Set方法，来将新数据放入到旧数据的后面即可

import { useEffect } from "react";

import { create } from "zustand";

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

const useStore=create((set)=>{

  return{

    channelList:[],

    fetchGetList:async ()=>{

      const res=await fetch(URL)

      const jsonRes= await res.json()

      set({

        channelList:jsonRes.data.channels

      })

    }

  }

})

function App() {

  const {fetchGetList,channelList}=useStore()

  useEffect(()=>{

    fetchGetList()

  },[fetchGetList])

  return (

    <div className="App">

      <ul>

        {

          channelList.map(item=><li key={item.key}>{item.name}</li>)

        }

      </ul>

    </div>

  );

}

export default App;

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

切片模式

当单个store比较大的时候，可以采用切片模式进行拆分组合

import { useEffect } from "react";

import { create } from "zustand";

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

// 创建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,fetchGetList,channelList}=useStore()

useEffect(()=>{

  fetchGetList()

},[fetchGetList])

  return (

    <div className="App">

       <button onClick={inc}>{count}</button>

      <ul>

        {channelList.map((item) => (

          <li key={item.id}>{item.name}</li>

        ))}

      </ul>

    </div>

  );

}

export default App;