Awesome

Mirror

查看中文

A simple and powerful React framework with minimal API and zero boilerplate. (Inspired by dva and 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 types (or action creators)
A reducers/ directory and tons of switch clause to capture all action types
Apply middlewares to handle async actions
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 and a little bit tedious.

In fact, most part of the above steps could be simplified. Like, create actions and reducers 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 to create an app:

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

After creating, install Mirror from npm:

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

`index.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'))