sl1673495 / React Composition Api
Licence: mit
🎨 Simple React state management. Made with @vue/reactivity and ❤️.
Stars: ✭ 67
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Composition Api
React Easy State
Simple React state management. Made with ❤️ and ES6 Proxies.
Stars: ✭ 2,459 (+3570.15%)
Mutual labels: reactive-programming, state-management, state
vuse-rx
Vue 3 + rxjs = ❤
Stars: ✭ 52 (-22.39%)
Mutual labels: state-management, state, reactive-programming
ReduxSimple
Simple Stupid Redux Store using Reactive Extensions
Stars: ✭ 119 (+77.61%)
Mutual labels: state-management, state, reactive-programming
Alveron
Elm & Reason inspired state management for React
Stars: ✭ 57 (-14.93%)
Mutual labels: state-management, state
Redux Orm
A small, simple and immutable ORM to manage relational data in your Redux store.
Stars: ✭ 2,922 (+4261.19%)
Mutual labels: state-management, state
k-ramel
State manager for your components apps, the safe and easy way
Stars: ✭ 20 (-70.15%)
Mutual labels: state-management, state
Duix
A State Manager focused on KISS and Pareto's Principle
Stars: ✭ 48 (-28.36%)
Mutual labels: state-management, state
Machinery
State machine thin layer for structs (+ GUI for Phoenix apps)
Stars: ✭ 367 (+447.76%)
Mutual labels: state-management, state
Reatom
State manager with a focus of all needs
Stars: ✭ 567 (+746.27%)
Mutual labels: state-management, state
Redux Tree
An alternative way to compose Redux reducers
Stars: ✭ 23 (-65.67%)
Mutual labels: state-management, state
React Recomponent
🥫 Reason-style reducer components for React using ES6 classes.
Stars: ✭ 272 (+305.97%)
Mutual labels: state-management, state
Govern
Component-based state management for JavaScript.
Stars: ✭ 270 (+302.99%)
Mutual labels: state-management, state
Cycle Onionify
MIGRATED! This was transfered to https://cycle.js.org/api/state.html
Stars: ✭ 286 (+326.87%)
Mutual labels: reactive-programming, state-management
alveron-old
Opinionated Elm-inspired Redux Component Architecture for React
Stars: ✭ 17 (-74.63%)
Mutual labels: state-management, state
Pullstate
Simple state stores using immer and React hooks - re-use parts of your state by pulling it anywhere you like!
Stars: ✭ 683 (+919.4%)
Mutual labels: state-management, state
Revived
A redux-inspired predictable state container for python
Stars: ✭ 12 (-82.09%)
Mutual labels: state-management, state
Use Global Context
A new way to use “useContext” better
Stars: ✭ 34 (-49.25%)
Mutual labels: state-management, state
atomic-state
A decentralized state management library for React
Stars: ✭ 54 (-19.4%)
Mutual labels: state-management, state
Welcome to rxv 👋
Use Vue3 Composition Api in React to manage state, just import @vue/reactivity, rxv means React x Vue
Homepage
🏠Demo
✨rxv
在 React 应用中使用@vue/reactivity 中的所有响应式能力
- 使用 setup 在组件中体验 Vue-Composition-Api
- 使用极简的 api 实现全局状态管理
Docs
https://sl1673495.github.io/react-composition-api
Why
- 直接引入
@vue/reacivity
,完全使用 Vue3 的 reactivity 能力,拥有computed
,effect
等各种能力,并且对于Set
和Map
也提供了响应式的能力。 后续也会随着这个库的更新变得更加完善的和强大。 -
vue-next
仓库内部完整的测试用例。 - 完善的 TypeScript 类型支持。
- 完全复用
@vue/reacivity
实现超强的全局状态管理能力。 - 状态管理中组件级别的精确更新。
Usage
npm i rxv -S
npm i @vue/reactivity -S
支持@vue/reactivity内部提供的所有 api,并在 React 组件中使用。
快速上手示例
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
组件:
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>
)
}
相对复杂的示例
这个例子里使用了 Vue3 中的 computed
、effect
等能力,是一个相对比较复杂的示例。
// 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>
)
}
可以看出来,store 的定义完全复用了@vue/reactivity
中的能力,而不会引入额外的学习成本,并且里面的所有能力都可以完美支持。
具体的代码和效果可以看文档中的 复杂示例
。
支持的 Vue3 api
除了内置的几个 api 以外,其他所有的 api 都是 Vue 内部提供的。
具体支持的 api,可以看vue-next
仓库中的导出的 api
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"
注意computed
、ref
这些包装后的值没有提供自动拆包的功能,必须用data.value
去读取和赋值。
LICENSE
MIT
Author
👤 ssh
- Website: https://blog.sl1673495.now.sh/
- Github: @sl1673495
Show your support
Give a ⭐️ if this project helped you!
This README was generated with ❤️ by readme-md-generator
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].