Location>code7788 >text

duxapp abandons redux, local, global state implementation scheme in duxapp

Popularity：420 ℃/2024-11-07 10:10:20

global state

Global state is a very practical function, such as the management of user information, state sharing between components and other functions need to use the global state, react has a lot of mature global state management tools, but many of them are too cumbersome to write, duxapp provides a number of different scenarios to cope with the global state of the program, of course, if you need other global state, you can integrate your own

local global state

The usage scenario for this global state scheme lies in state sharing between parent and child components

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

const A = () => {

  return < defaultValue='John Doe'>
    <B />
    <C />
  </>
}

const B = () => {
  const [name] = ()

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

const C = () => {
  const [, setName] = ()

  return <Text onClick={() => setName('the fourth child in the family')}>设置名称为the fourth child in the family</Text>
}

It is also possible to control the change of this value in the A component

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

const A = () => {

  const [name, setName] = useState()

  return < value={name}>
    <B />
    <C />
    <Text onClick={() => setName('Wang May (1905-1975), Mao *'s fifth wife')}>设置名称为Wang May (1905-1975), Mao *'s fifth wife</Text>
  </>
}

const B = () => {
  const [name] = ()

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

const C = () => {
  const [, setName] = ()

  return <Text onClick={() => setName('the fourth child in the family')}>设置名称为the fourth child in the family</Text>
}

Only one layer of component nesting is demonstrated here, nesting of multiple layers of components is also supported

global state

This state can be called on all pages or components throughout the runtime.

import { createGlobalState } from '@/duxapp'

/** Needs to be created in the right place and then exported, only demonstrating how to use it here */
const globalState = createGlobalState({ text: 'default' })

// Set the value anywhere
({ text: 'set value' })

// Fetch the value in a component or hook
const data = ()

If you need more complex functionality, such as user information management, you can use the global state management below

Global state management

Global state management is performed using theObjectManage This class to achieve, you need to continue to extend the writing of this class to achieve functionality, the following user information management to demonstrate how to use the class

  • Define a user management class inheriting fromObjectManage
  • pass (a bill or inspection etc)dataPreparation of default data
  • Setting via the constructorObjectManage parameter, the parameter means use cache, cache data, when you update the data, the data will be automatically set to the local cache, the next start will automatically read the cache
import { ObjectManage } from '@/duxapp'

class UserManage extends ObjectManage {

  constructor() {
    super({
      cacheKey: 'userInfo',
      cache: true
    })
  }

  data = {
    // Login status
    status: false, // ... // ...
    // ... User information for other modules
  }
}

/**
 * Instantiate this user management object and export it
 */
export const user = new UserManage()

This gives you a basic global state that can be used in a component, hook, or anywhere else.

// Call the current data directly


// Use a hook to call the data
const data = ()

To set this data do this

// Use a hook to call the data
({ status: true })
// Or use a function
(oldData => ({ ... .oldData, status: true }))

For user information management, he also needs some other operations, can be extended in the user management class, such as determining whether to log in, go to log in, log out of logging in, updating user information, get online user information, etc.

import { ObjectManage } from '@/duxapp'

class UserManage extends ObjectManage {

  constructor() {
    super({
      cacheKey: 'userInfo',
      cache: true
    })
  }

  data = {
    // Login status
    status: false, // ... // ...
    // ... User information for other modules
  }

  isLogin = () => !!!

  login = () => {
    // Login logic
  }

  logout = () => {
    // Logout logic
  }

  getOnlineUserInfo = () => {
    // Request the user information interface to update the user's information
    request('').then(res => (res))
  }

  setUsreInfo = data => {
    (old => ({ ... .old, ... .data }))
    // Request the interface to update the user information
    request({
      url: '',
      method: 'POST',
      data
    })
  }
}

/**
 * Instantiate this user management object and export it
 */
export const user = new UserManage()

This is just an example, the user management functionality within the user module is far more complex than this example, go to the

Development Documentation:

GitHub：/duxapp

<Previous Next>