https://github.com/ruanyl/reapex
Intuitive state management and data flow orchestration
https://github.com/ruanyl/reapex
data-flow react state-management typescript vue
Last synced: 11 months ago
JSON representation
Intuitive state management and data flow orchestration
- Host: GitHub
- URL: https://github.com/ruanyl/reapex
- Owner: ruanyl
- License: mit
- Created: 2018-05-01T20:47:53.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-08-03T06:37:18.000Z (almost 3 years ago)
- Last Synced: 2025-03-14T05:19:10.297Z (over 1 year ago)
- Topics: data-flow, react, state-management, typescript, vue
- Language: TypeScript
- Homepage: https://reapex.gitbook.io/docs
- Size: 1.89 MB
- Stars: 58
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Reapex
[](https://travis-ci.org/github/ruanyl/reapex)
[](https://www.npmjs.com/package/reapex)
[](https://github.com/ruanyl/reapex/issues)
[](https://github.com/ruanyl/reapex/blob/master/LICENSE.md)
Intuitive state management and data flow orchestration library which provides seamless development experience for React and Vue application.
#### [Documentation](https://reapex.gitbook.io/docs/)
## Examples
### Run example
Examples are under `examples` folder.
```
yarn example:counter
yarn example:vue-counter
```
Or check out live examples:
1. [Counter](https://codesandbox.io/s/reapex-example-counter-oluew)
2. [Todo List](https://codesandbox.io/s/todo-list-examle-reapex-2n4qc?file=/src/index.tsx)
3. [Login Form](https://codesandbox.io/s/reapex-login-form-06eq1)
4. [Vue Counter](https://codesandbox.io/s/vue-counter-jgb5u?file=/src/main.ts)
## Getting started with a simple React `Counter` example
```
npm i reapex reapex-react --save
```
### Example
```typescript
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 (
<>
-
{total}
+
>
)
}
// Render it!
render(, document.getElementById('root'))
```
## Integrate with immerjs
```typescript
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](https://github.com/ReapexJS/reapex-plugin-immer)
## Work with Local Storage
```typescript
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](https://github.com/ruanyl/reapex/blob/master/packages/reapex-plugin-local-storage/README.md)