pzxie/wohoox

Easy, lightweight and reactive state management.

Lightweight and reactive state management

Why wohoox?

Wo hoo! wohoox!

• Full Typescript support
• Lightweight and reactive state management
• [wohoox-react]Dependency collection automatic，components update exactly
• [wohoox-react]Easy to use. No HOC
• [wohoox-react]Implementation and use based on React hooks

Core libs

• wohoox, Lightweight and reactive state management
• wohoox-react, Implementation and use based on React hooks and wohoox

Quick start

Create store

/**
 * src/store.ts
 */
import { createStore } from 'wohoox'

const store = createStore({
  initState: {
    version: '2.x',
    details: {
      name: 'wohoox',
      other: 'xxx',
    },
  },
})

export default store

Get state

/**
 * request.ts
 */

import store from 'src/store'

const { state, actions } = store

function request() {
  // 使用 state
  return fetch(`/api/details?version=${state.version}`)
}

async function getVersion() {
  const res = await fetch('/api/version')
  const { version } = await res.json()

  console.log(version)
}

Update state

wohoox updates state by action. This will make the state changes more controllable and trackable

/**
 * src/store.ts
 */
import { createStore } from 'wohoox'

const store = createStore({
  initState: {...},
  // init actions
  actions: {
    updateVersion(state, version: string) {
      state.version = version
    },
    updateDetailsName(state, name: string) {
      state.details.name = name;
    }
    updateDetails(state, details: typeof state.details) {
      state.details = details
    }
  },
})

export default store

/**
 * request.ts
 */

import store from 'src/store'

const { state, actions } = store

function request() {
  return fetch(`/api/details?version=${state.version}`)
}

async function getVersion() {
  const res = await fetch('/api/version')
  const { version, details } = await res.json()

  // update version by action
  actions.updateVersion(version)
  console.log(state.version)

  // update the object
  actions.updateDetails(details)
  console.log(state.details)

  // update the deep field
  actions.updateDetailsName(details.name)
  console.log(state.details)
}