Mirror

以中文查看

A simple and powerful React framework with minimal API and zero boilerplate. (Inspired by dva and jumpsate)

Painless React and Redux.

• Introduction
• Guides
  • State management
  • Routing
  • Rendering
  • Hooks
• Get Started
• Examples
• API
• FAQ

Introduction

Mirror is a front-end framework based on React, Redux and react-router. It encapsulates state management, routing and other essential things to build web apps together in very few methods, and makes it much easier to use:

• Minimal API

Mirror has very minimal APIs, only 4 of them are newly introduced, the rest are all of existed ones from React or Redux, or react-router, like render and connect(although most of them are enhanced).

• Easy to start

You don't have to learn some new things to get started with Mirror, the only requirement is a basic understanding of React, Redux and react-router, you can learn more from the Redux Docs and react-router Docs. In fact, You can start writing your app from the first line of your code.

• Simple actions, sync or async

No manually created action types or action creators, no explicitly dispatchs, no redux-thunk or redux-saga or mobx -- just call a function to dispatch your actions.

• Support loading models dynamically

In large apps, it's very likely that not all reducers and states(models) are defined the same time. In this case you may need to dynamically inject a model into your app's store. Mirror provides a very simple way to do that.

• Full-featured hook mechanism

Hooks give you the power to monitor every Redux action you dispatched, and do whatever you want.

Get Started

Creating an App

Use create-react-app to create an app:

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

After creating, install Mirror from npm:

$ 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` object from mirror
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 the enhanced `ReactDOM.render`
render(<App/>, document.getElementById('root'))

Demo

Examples

• Counter
• Simple-Router
• Todo

FAQ

Does Mirror support Redux DevTools Extension?

Yes.

Can I use extra Redux middlewares?

Yes, speicify them in mirror.defaults, learn more from the Docs.

Which version of react-router does Mirror use?

react-router v4.