# reapex

> A framework to build React application

Latest version **1.1.1** (published 2022-07-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install reapex
pnpm add reapex
yarn add reapex
bun add reapex
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2022-07-04 |
| First published | 2018-07-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 366.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 57 |
| Author | Yulong Ruan |
| Maintainers | ruanyu1 |
| Keywords | micro frontend, react, vue, state management |

## Links

- npm: https://www.npmjs.com/package/reapex
- Repository: https://github.com/ruanyl/reapex
- Issues: https://github.com/ruanyl/reapex/issues
- npm.io page: https://npm.io/package/reapex

## Dependencies (4)

- [redux](https://npm.io/package/redux.md) ^4.1.2
- [tapable](https://npm.io/package/tapable.md) ^2.2.0
- [redux-saga](https://npm.io/package/redux-saga.md) ^1.1.3
- [redux-devtools-extension](https://npm.io/package/redux-devtools-extension.md) ^2.13.9

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2022-07-04
- 1.1.0 (beta) — 2022-07-04
- 1.0.0 — 2022-03-16
- 1.0.0-beta.28 — 2022-01-16
- 1.0.0-beta.27 — 2022-01-16
- 0.11.7 — 2021-12-14
- 1.0.0-beta.26 — 2021-10-28
- 1.0.0-beta.23 — 2021-10-12
- 1.0.0-beta.22 — 2021-10-06
- 1.0.0-beta.21 — 2021-06-22
- 1.0.0-beta.20 — 2021-05-29
- 1.0.0-beta.18 — 2021-04-29
- 1.0.0-beta.17 — 2021-04-11
- 1.0.0-beta.16 — 2021-04-06
- 1.0.0-beta.15 — 2021-03-25
- … 62 more at https://npm.io/package/reapex/versions

## 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 (
    <>
      <button onClick={mutations.decrease}>-</button>
      {total}
      <button onClick={mutations.increase}>+</button>
    </>
  )
}

// Render it!
render(<Counter />, 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)

---
_Source: https://npm.io/package/reapex · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._