React — zustand狀態管理工具

萬事順意發表於2024-03-16
React

zustand 是一個用於狀態管理的簡單而強大的庫，它可以與 React 一起使用。它提供了一種簡單的方式來管理元件的狀態，並且遵循了 React Hooks 的使用規範。

使用 zustand 可以方便地建立和共享狀態，同時還能夠實現狀態的訂閱和更新。透過 zustand，你可以建立自定義的狀態鉤子，並在元件中使用這些鉤子來獲取狀態並進行狀態更新。

1.下載、建立、基礎用法

npm install zustand
import './App.css';
import {create} from 'zustand'


//1.建立store
//注意事項：
//(1)函式引數必須返回一個物件，物件內部編寫狀態資料和方法
//(2)set方法是用來修改資料的專門方法 必須呼叫這個方法來修改資料
//語法1：引數是函式 需要用到老資料的情況
//語法2：引數直接是一個物件
const useStore= create((set)=>{  //create方法內部是一個函式

  return { //return一個物件
    count : 0, //儲存的資料狀態
    inc : ()=>{ //修改狀態 是一個函式

      //語法1
      set((state)=>({
        count : state.count+1
      }))

      //語法2
      // set({count : 100})
    }
  }
})

//繫結store到元件
function App() {
 const {count,inc} = useStore()
  return (
    <div className="App">
      <button onClick={inc}>{count}</button>
    </div>
  );
}

export default App;

程式碼解析：

  1. create 方法接受一個函式作為引數，這個函式內部會接收一個名為set的函式作為引數。set 函式的作用是用來更新狀態。

  2. 在這個函式內部，透過 return 返回了一個物件，這個物件包含了狀態變數 count 和更新狀態的函式 inc。

  3. count 是一個儲存資料狀態的變數，初始值為 0。

  4. inc 是一個函式，呼叫時將會透過 set 函式來更新狀態。在這個例子中，它使用了函式式更新的方式，接受當前狀態 state 作為引數，並返回一個新的狀態物件，從而實現對 count 狀態的加一操作。

  5. 最終，透過 create 方法返回的內容，我們可以在元件中使用 useStore 鉤子來獲取 count 狀態和 inc 函式，並且在元件中進行狀態的更新和管理。

2.非同步支援

import { useEffect } from 'react';
import './App.css';
import {create} from 'zustand'

const URL ='http://xxxxxxs'

const useStore= create((set)=>{  //create方法內部是一個函式

  return { //return一個物件

    channelList : [],
    asyncGetList : async ()=>{
      const res = await fetch(URL)
      const jsonres = await res.json()
      console.log(jsonres)
      set({
        channelList : jsonres
      })
    }
  }
})

//繫結store到元件
function App() {
 const {count,inc ,asyncGetList,channelList} = useStore()
    useEffect(()=>{

      asyncGetList()
    },[asyncGetList])
  return (
    <div className="App">
      <button onClick={inc}>{count}</button>
    </div>
  );
}

export default App;

程式碼解析：

  1. create 方法用於建立一個新的 Zustand store。它接受一個回撥函式作為引數，該回撥函式會接收 set 方法作為引數，並返回一個包含狀態和操作的物件。

  2. 在回撥函式中，返回一個包含 channelList 和 asyncGetList 的物件。channelList 用於儲存頻道列表，asyncGetList 是一個非同步函式，用於從指定的 URL 獲取資料並更新 channelList。

  3. 在元件中使用 useStore 呼叫 create 建立的 Zustand store，獲取到 asyncGetList 和 channelList。

  4. 使用 useEffect 鉤子在元件掛載後呼叫 asyncGetList 函式，以便獲取頻道列表資料。在 useEffect 的依賴陣列中傳入 asyncGetList，以確保只有在 asyncGetList 函式發生變化時才會重新觸發效果。

  5. 需要注意的是，這段程式碼中的 URL 變數是一個佔位符，實際專案中應該替換為真實的 API 地址。

3.切片模式

import { useEffect } from 'react';
import './App.css';
import {create} from 'zustand'


const createCounterStore = (set)=>{
  return {
    count : 0, //儲存的資料狀態
    inc : ()=>{ //修改狀態 是一個函式

      //語法1
      set((state)=>({
        count : state.count+1
      }))
      //語法2
      // set({count : 100})
    },
  }
}
const createChannelStore = (set)=>{
  return {
    channelList : [],
    asyncGetList : async ()=>{
      const res = await fetch(URL)
      const jsonres = await res.json()
      console.log(jsonres)
      set({
        channelList : jsonres
      })
    }
  }
}

const useStore= create((...a)=>{  //create方法內部是一個函式
  return {
    ...createCounterStore(...a),
    ...createChannelStore(...a)
  }

})

//繫結store到元件
function App() {
 const {count,inc ,asyncGetList,channelList} = useStore()
    useEffect(()=>{

      asyncGetList()
    },[asyncGetList])
  return (
    <div className="App">
      <button onClick={inc}>{count}</button>
    </div>
  );
}

export default App;

程式碼解析：

  1. createCounterStore 函式用於建立一個儲存計數器狀態的 store。它接受 set 方法作為引數，並返回一個包含計數器狀態和增加計數器函式的物件。

  2. createChannelStore 函式用於建立一個儲存頻道列表狀態的 store。它同樣接受 set 方法作為引數，並返回一個包含頻道列表和非同步獲取頻道列表資料的函式的物件。

  3. 在 useStore 中使用 create 方法建立一個包含兩個不同 store 的 Zustand store。透過使用 ... 運算子將 createCounterStore 和 createChannelStore 的返回值合併到同一個物件中。

  4. 在元件中使用 useStore 呼叫 create 建立的 Zustand store，獲取到 count、inc、asyncGetList 和 channelList。

相關文章