Intuitive state management and data flow orchestration
Intuitive state management and data flow orchestration library which provides seamless development experience for React and Vue application.
Examples are under examples
folder.
yarn example:counter
yarn example:vue-counter
Or check out live examples:
Counter
examplenpm i reapex reapex-react --save
import React from 'react'
import { render } from 'react-dom'
import { App } from 'reapex'
import { useModel } from 'reapex-react'
const app = new App()
// Create a model(state)
const CounterModel = app.model('Counter', 0)
// Define the mutations: how you want the state to be mutated
const [mutations] = CounterModel.mutations({
increase: () => total => total + 1,
decrease: () => total => total - 1,
})
// useModel in the component
export const Counter = () => {
const total = useModel(CounterModel)
return (
<>
<button onClick={mutations.decrease}>-</button>
{total}
<button onClick={mutations.increase}>+</button>
</>
)
}
// Render it!
render(<Counter />, document.getElementById('root'))
import immerPlugin from 'reapex-plugin-immer'
app.plugin(immerPlugin)
const CounterModel = app.model('Counter', { total: 0 })
const [mutations] = counter.mutations({
increase: () => s => {
s.total = s.total + 1
return s
},
decrease: () => s => {
s.total = s.total - 1
return s
},
})
Checkout reapex-plugin-immer
import { App } from 'reapex'
import createLocalStoragePlugin from 'reapex-plugin-local-storage'
// 1. Initialize the plugin
const { plugin, persist } = createLocalStoragePlugin()
const app = new App()
// 2. register the plugin
app.plugin(plugin)
// 3. Simply wrap a `model` with `persist`
const UserModel = app.model('User', { name: '', age: 0 })
persist(UserModel)
Checkout reapex-plugin-local-storage