Reapex

Intuitive state management and data flow orchestration library which provides seamless development experience for React and Vue application.

Documentation

Examples

Run example

Examples are under examples folder.

yarn example:counter
yarn example:vue-counter

Or check out live examples:

Getting started with a simple React `Counter` example

npm i reapex reapex-react --save

Example

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'))

Integrate with immerjs

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

Work with Local Storage

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)