Simple React State Management

Use Vue3 Composition Api in React to manage state, just import @vue/reactivity, rxv means React x Vue

🏠 Homepage

✨ Demo

rxv

Use all the reactive capabilities in @vue/reactivity in React apps

1. Use setup to experience Vue-Composition-Api in components
2. Use minimal api to achieve global state management

Docs

https://sl1673495.github.io/react-composition-api

Why

1. Introduced directly @vue/reacivity, using the full capacity Vue3 reactivity, with computed, effectother capabilities, and for Setand Mapalso provides a responsive ability. Follow-up will also become more complete and powerful with the update of this library.
2. vue-nextComplete test cases inside the warehouse.
3. Complete TypeScript type support.
4. Fully reuse to @vue/reacivityachieve super strong global state management capabilities .
5. Precise update of component level in state management.

Usage

npm i rxv -S
npm i @vue/reactivity -S

Support all apis provided by @vue/reactivity and use them in React components.

Quick start example

store：

import { reactive } from "@vue/reactivity"

export const state = reactive({
  count: 0,
})

export const add = () => (state.count += 1)

export const store = reactive(state)

export type Store = typeof store

Components:

import React from "react"
import { Provider, useStore } from "rxv"
import { store, add, Store } from "./store"

function Count() {
  const countState = useStore((store: Store) => ({
    count: store.count,
  }))

  return (
    <Card hoverable style={{ marginBottom: 24 }}>
      <h1>计数器</h1>
      <div className="chunk">
        <div className="text-chunk">
          store中的count现在是 {countState.count}
        </div>
        <Button onClick={add}>add</Button>
      </div>
    </Card>
  )
}

export default () => {
  return (
    <Provider value={store}>
      <div className="flex">
        <Count />
      </div>
    </Provider>
  )
}

Relatively complex example

This example uses Vue3’s computed, effectetc. capabilities, which is a relatively complex example.

// store.ts
import { reactive, computed, effect } from "@vue/reactivity"

export const state = reactive({
  count: 0,
})

const plusOne = computed(() => state.count + 1)

effect(() => {
  console.log("plusOne changed: ", plusOne)
})

const add = () => (state.count += 1)

export const mutations = {
  // mutation
  add,
}

export const store = {
  state,
  computed: {
    plusOne,
  },
}

export type Store = typeof store
// Index.tsx
import { Provider, useStore } from "rxv"
function Count() {
  const countState = useStore((store: Store) => {
    const { state, computed } = store
    const { count } = state
    const { plusOne } = computed

    return {
      count,
      plusOne,
    }
  })

  return (
    <Card hoverable style={{ marginBottom: 24 }}>
      <h1>计数器</h1>
      <div className="chunk">
        <div className="chunk">store中的count现在是 {countState.count}</div>
        <div className="chunk">
          computed值中的plusOne现在是 {countState.plusOne.value}
        </div>
        <Button onClick={mutations.add}>add</Button>
      </div>
    </Card>
  )
}

export default () => {
  return (
    <Provider value={store}>
      <Count />
    </Provider>
  )
}

It can be seen that the definition of store completely reuses @vue/reactivitythe capabilities in it without introducing additional learning costs, and all capabilities in it can be perfectly supported.

Specific code and can see the effect of the document in 复杂示例.

Supported Vue3 api

Except for several built-in APIs, all other APIs are provided internally by Vue.

The specific supported api, you can see vue-nextthe exported api in the warehouse

export { ref, isRef, toRefs, Ref, UnwrapRef } from "./ref"
export {
  reactive,
  isReactive,
  readonly,
  isReadonly,
  shallowReadonly,
  toRaw,
  markReadonly,
  markNonReactive,
} from "./reactive"
export {
  computed,
  ComputedRef,
  WritableComputedRef,
  WritableComputedOptions,
  ComputedGetter,
  ComputedSetter,
} from "./computed"
export {
  effect,
  stop,
  pauseTracking,
  resumeTracking,
  ITERATE_KEY,
  ReactiveEffect,
  ReactiveEffectOptions,
  DebuggerEvent,
} from "./effect"
export { lock, unlock } from "./lock"
export { TrackOpTypes, TriggerOpTypes } from "./operations"

Note computed, refthe value of the package does not provide automatic unpacking these functions, you must use data.valueto read and assignments.

Download Details:

Author: sl1673495

Demo: https://sl1673495.github.io/react-composition-api/

Source Code: https://github.com/sl1673495/react-composition-api

#react #reactjs #javascript