全局狀態(tài)

全局狀態(tài)是一個很實用的功能，例如管理用戶信息，組件間狀態(tài)共享等功能都需要用到全局狀態(tài)，react有很多成熟的全局狀態(tài)管理工具，但是很多寫起來太過麻煩，duxapp提供了幾種應對不同場景的全局狀態(tài)的方案，當然如果你需要其他全局狀態(tài)，可以自行集成

局部全局狀態(tài)

這種全局狀態(tài)方案的使用場景，在于父子組件之間的狀態(tài)共享

import { contextState } from '@/duxapp'
import { Text } from '@/duxui'

const A = () => {

  return <contextState.Provider defaultValue='張三'>
    <B />
    <C />
  </contextState.Provider>
}

const B = () => {
  const [name] = contextState.useState()

  return <Text>{name}</Text>
}

const C = () => {
  const [, setName] = contextState.useState()

  return <Text onClick={() => setName('李四')}>設(shè)置名稱為李四</Text>
}

也可以在A組件中控制這個值的變化

import { contextState } from '@/duxapp'
import { Text } from '@/duxui'
import { useState } from 'react'

const A = () => {

  const [name, setName] = useState()

  return <contextState.Provider value={name}>
    <B />
    <C />
    <Text onClick={() => setName('王五')}>設(shè)置名稱為王五</Text>
  </contextState.Provider>
}

const B = () => {
  const [name] = contextState.useState()

  return <Text>{name}</Text>
}

const C = () => {
  const [, setName] = contextState.useState()

  return <Text onClick={() => setName('李四')}>設(shè)置名稱為李四</Text>
}

這里只演示了一層組件的嵌套，多層組件的嵌套也是支持的

全局狀態(tài)

這個狀態(tài)可以在整個運行時內(nèi)所有頁面或者組件內(nèi)調(diào)用

import { createGlobalState } from '@/duxapp'

/** 需要在合適的地方創(chuàng)建，然后導出，在此處僅演示如何使用 */
const globalState = createGlobalState({ text: '默認值' })

// 任何地方設(shè)置值
globalState.setState({ text: '設(shè)置的值' })

// 在組件或者hook中取值
const data = globalState.useState()

這個方法使用比較單間，如果你需要更復雜的功能，例如用戶信息管理，可以使用下面的全局狀態(tài)管理

全局狀態(tài)管理

全局狀態(tài)管理是用 ObjectManage 這個類來實現(xiàn)的，你需要繼續(xù)擴展編寫這個類來實現(xiàn)功能，下面以用戶信息管理來演示如何使用這個類

• 定義一個用戶管理類繼承到ObjectManage
• 通過data，編寫默認數(shù)據(jù)
• 通過構(gòu)造函數(shù)設(shè)置 ObjectManage 的參數(shù)，參數(shù)的意思是使用緩存，緩存數(shù)據(jù)，當你更新數(shù)據(jù)時，數(shù)據(jù)會被自動設(shè)置到本地緩存中，下次啟動將自動讀取緩存

import { ObjectManage } from '@/duxapp'

class UserManage extends ObjectManage {
  
  constructor() {
    super({
      cacheKey: 'userInfo',
      cache: true
    })
  }

  data = {
    // 登錄狀態(tài)
    status: false,
    // ...其他模塊的用戶信息
  }
}

/**
 * 實例化這個用戶管理對象并且導出
 */
export const user = new UserManage()

這樣就獲得了一個基本的全局狀態(tài)，要使用這些全局狀態(tài)，可以在組件、hook、或者其他任何位置

// 直接調(diào)用當前數(shù)據(jù)
user.data.status

// 使用hook調(diào)用數(shù)據(jù)
const data = user.useData()
data.status

要設(shè)置這些數(shù)據(jù)這樣操作

// 使用hook調(diào)用數(shù)據(jù)
user.set({ status: true })
// 或者使用函數(shù)
user.set(oldData => ({ ...oldData, status: true }))

對于用戶信息管理，他還需要一些其他的操作，都可以在用戶管理類里面進行擴展，例如判斷是否登錄，去登錄、退出登錄、更新用戶信息、獲取線上用戶信息等

import { ObjectManage } from '@/duxapp'

class UserManage extends ObjectManage {
  
  constructor() {
    super({
      cacheKey: 'userInfo',
      cache: true
    })
  }

  data = {
    // 登錄狀態(tài)
    status: false,
    // ...其他模塊的用戶信息
  }

  isLogin = () => !!this.data.status

  login = () => {
    // 登錄邏輯
  }

  logout = () => {
    // 退出登錄邏輯
  }

  getOnlineUserInfo = () => {
    // 請求用戶信息接口更新用戶信息
    request('').then(res => this.set(res))
  }

  setUsreInfo = data => {
    this.set(old => ({ ...old, ...data }))
    // 請求接口更新用戶信息
    request({
      url: '',
      method: 'POST',
      data
    })
  }
}

/**
 * 實例化這個用戶管理對象并且導出
 */
export const user = new UserManage()

這里僅是舉例，用戶模塊里面的用戶管理功能遠比此例子復雜，可以前往查看

開發(fā)文檔：http://duxapp.cn

GitHub：https://github.com/duxapp