# mirrorx

> A React framework with minimal API and zero boilerplate.

Latest version **1.1.3** (published 2021-03-01) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2021-03-01 |
| First published | 2017-05-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/mirrorx) |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 150.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1429 |
| Maintainers | llh911001, aaronphy |
| Keywords | framework, react, redux, mirror, mirrorx, react-router, front-end |

## Links

- npm: https://www.npmjs.com/package/mirrorx
- Repository: https://github.com/mirrorjs/mirror
- Homepage: https://github.com/mirrorjs/mirror#readme
- Issues: https://github.com/mirrorjs/mirror/issues
- npm.io page: https://npm.io/package/mirrorx

## Dependencies (6)

- [redux](https://npm.io/package/redux.md) ^4.0.5
- [history](https://npm.io/package/history.md) ^4.10.1
- [react-redux](https://npm.io/package/react-redux.md) ^5.1.2
- [react-router](https://npm.io/package/react-router.md) ^4.3.1
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^4.3.1
- [react-router-redux](https://npm.io/package/react-router-redux.md) ^5.0.0-alpha.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.3 (latest) — 2021-03-01
- 1.1.2 — 2021-03-01
- 1.1.1 — 2019-08-28
- 1.1.0 — 2019-05-06
- 1.0.0 — 2019-05-06
- 0.2.13 — 2019-03-21
- 0.2.12 — 2018-09-09
- 0.2.11 — 2018-05-04
- 0.2.10 — 2017-10-20
- 0.2.9 — 2017-10-19
- 0.2.8 — 2017-10-19
- 0.2.7 — 2017-09-16
- 0.2.6 — 2017-09-08
- 0.2.5 — 2017-08-25
- 0.2.4 — 2017-08-17
- … 9 more at https://npm.io/package/mirrorx/versions

## README

# Mirror

[![npm version](https://img.shields.io/npm/v/mirrorx.svg?colorB=007ec6&style=flat-square)](https://www.npmjs.com/package/mirrorx) [![build status](https://img.shields.io/travis/mirrorjs/mirror.svg?style=flat-square)](https://travis-ci.org/mirrorjs/mirror) [![coverage status](https://img.shields.io/coveralls/mirrorjs/mirror.svg?style=flat-square)](https://coveralls.io/github/mirrorjs/mirror?branch=master) [![license](https://img.shields.io/github/license/mirrorjs/mirror.svg?style=flat-square)](https://github.com/mirrorjs/mirror/blob/master/LICENSE)

[查看中文](https://github.com/mirrorjs/mirror/blob/master/README_zh.md)

A simple and powerful React framework with minimal API and zero boilerplate. (Inspired by [dva](https://github.com/dvajs/dva) and [jumpstate](https://github.com/jumpsuit/jumpstate))

> Painless React and Redux.

## Why?

We love React and Redux.

A typical React/Redux app looks like the following:

* An `actions/` directory to manually create all `action type`s (or `action creator`s)
* A `reducers/` directory and tons of `switch` clause to capture all `action type`s
* Apply middlewares to handle `async action`s
* Explicitly invoke `dispatch` method to dispatch all actions
* Manually create `history` to router and/or sync with store
* Invoke methods in `history` or dispatch actions to programmatically changing routes

The problem? [Too much boilerplates](https://github.com/reactjs/redux/blob/master/docs/recipes/ReducingBoilerplate.md) and a little bit tedious.

In fact, most part of the above steps could be simplified. Like, create `action`s and `reducer`s in a single method, or dispatch both sync and async actions by simply invoking a function without extra middleware, or define routes without caring about `history`, etc.

That's exactly what Mirror does, encapsulates the tedious or repetitive work in very few APIs to offer a high level abstraction with efficiency and simplicity, and without breaking the pattern.

## Features

* Minimal API(only 4 newly introduced)
* Easy to start
* Actions done easy, sync or async
* Support code splitting
* Full-featured hook mechanism

## Getting Started

### Creating an App

Use [create-react-app](https://github.com/facebookincubator/create-react-app) to create an app:

```sh
$ npm i -g create-react-app
$ create-react-app my-app
```

After creating, install Mirror from npm:

```sh
$ cd my-app
$ npm i --save mirrorx
$ npm start
```

### `index.js`

```js
import React from 'react'
import mirror, {actions, connect, render} from 'mirrorx'

// declare Redux state, reducers and actions,
// all actions will be added to `actions`.
mirror.model({
  name: 'app',
  initialState: 0,
  reducers: {
    increment(state) { return state + 1 },
    decrement(state) { return state - 1 }
  },
  effects: {
    async incrementAsync() {
      await new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve()
        }, 1000)
      })
      actions.app.increment()
    }
  }
})

// connect state with component
const App = connect(state => {
  return {count: state.app}
})(props => (
    <div>
      <h1>{props.count}</h1>
      {/* dispatch the actions */}
      <button onClick={() => actions.app.decrement()}>-</button>
      <button onClick={() => actions.app.increment()}>+</button>
      {/* dispatch the async action */}
      <button onClick={() => actions.app.incrementAsync()}>+ Async</button>
    </div>
  )
)

// start the app，`render` is an enhanced `ReactDOM.render`
render(<App />, document.getElementById('root'))
```

### [Demo](https://codesandbox.io/s/814mnvw1qj)

## Guide

See [Guide](https://github.com/mirrorjs/mirror/blob/master/docs/guide.md).

## API

See [API Reference](https://github.com/mirrorjs/mirror/blob/master/docs/api.md).

## Examples

* [User-Dashboard](https://github.com/mirrorjs/user-dashboard-example) (An example similar to dva-user-dashboard)
* [Counter](https://github.com/mirrorjs/mirror/blob/master/examples/counter)
* [Simple-Router](https://github.com/mirrorjs/mirror/blob/master/examples/simple-router)
* [Todo](https://github.com/mirrorjs/mirror/blob/master/examples/todo)

## Change log

See [CHANGES.md](https://github.com/mirrorjs/mirror/blob/master/CHANGES.md).

## FAQ

#### Does Mirror support TypeScript?

Yes, it does.

#### Does Mirror support [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension)?

Yes, Mirror integrates Redux DevTools by default to make your debugging more easily.

#### Can I use extra Redux middlewares?

Yes, specify them in [`mirror.defaults`](https://github.com/mirrorjs/mirror/blob/master/docs/api.md#-optionsmiddlewares) is all you need to do, learn more from the Docs.

#### I'm really into Redux-Saga, is there any way to use it in Mirror?

Yes of course, take a look at the [`addEffect`](https://github.com/mirrorjs/mirror/blob/master/docs/api.md#-optionsaddeffect) option.

#### Which version of react-router does Mirror use?

react-router v4.

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