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: 2 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 (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-08-03T06:37:18.000Z (over 1 year ago)
• Last Synced: 2024-10-30T21:47:41.894Z (2 months ago)
• Topics: data-flow, react, state-management, typescript, vue
• Language: TypeScript
• Homepage: https://reapex.gitbook.io/docs
• Size: 1.89 MB
• Stars: 58
• Watchers: 3
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Reapex 

[![travis-ci](https://travis-ci.org/ruanyl/reapex.svg?branch=master)](https://travis-ci.org/github/ruanyl/reapex)

![github-workflow](https://github.com/ruanyl/reapex/workflows/CI/badge.svg)

[![npm](https://img.shields.io/npm/v/reapex.svg)](https://www.npmjs.com/package/reapex)

[![issues](https://img.shields.io/github/issues/ruanyl/reapex)](https://github.com/ruanyl/reapex/issues)

[![license](https://img.shields.io/github/license/ruanyl/reapex)](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)