Mirror 是一款基于 React，Redux 和 react-router 的前端框架

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 typesApply middlewares to handle async actionsExplicitly invoke dispatch method to dispatch all actionsManually create history to router and/or sync with storeInvoke 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 startActions done easy, sync or asyncSupport code splittingFull-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 componentconst App = connect(state => { return {count: state.app}})(props => (