Skip to content

Latest commit

 

History

History
141 lines (98 loc) · 4.7 KB

README.md

File metadata and controls

141 lines (98 loc) · 4.7 KB
Raw

Mirror

npm version build status coverage status license

查看中文

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 loading models dynamically
  • 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'))

Demo

Guide

See Guide.

API

See API Reference.

Examples

Change log

See CHANGES.md.

FAQ

Does Mirror support Redux DevTools Extension?

Yes.

Can I use extra Redux middlewares?

Yes, specify them in mirror.defaults 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 option.

Which version of react-router does Mirror use?

react-router v4.