阿里 React 框架 mirror 使用教程

最近两天阿里一直占据着头条，一个是支付宝小程序，一个是 mirror 的发布。本文将详细的介绍 mirror 的原理，特点和使用。

Mirror 是一款基于 React、Redux 和 react-router 的前端框架，简洁高效、灵活可靠。

Mirror 使用的是react-router 4.x。

既然有了 React 阿里为什么又推出 mirror 呢？

这一切估计得从小程序说起。支付宝也推出了小程序，但是底层完全和微信小程序不同。并且支付宝的小程序是基于 React 的。但是 React 和 Redux 的一些缺点在支付宝小程序上将被放大，因此阿里推出了 mirror。

一个典型的 React/Redux 应用看起来像下面这样：

• 一个 actions/ 目录用来手动创建所有的 action type（或者 action creator）；
• 一个 reducers/ 目录以及无数的 switch 来捕获所有的 action type；
• 必须要依赖 middleware 才能处理 异步 action；
• 明确调用 dispatch 方法来 dispatch 所有的 action；
• 手动创建 history 对象关联路由组件，可能还需要与 store 同步；
• 调用 history 上的方法或者 dispatch action 来手动更新路由；

从上面就可以看出 React/Redux 存在的问题。太多的 样板文件 以及繁琐甚至重复的劳动。

实际上，上述大部分操作都是可以简化的。比如，在单个 API 中创建所有的 action 和 reducer；比如，简单地调用一个函数来 dispatch 所有的同步和异步 action，且不需要额外引入 middleware；再比如，使用路由的时候只需要关心定义具体的路由，不用去关心 history 对象，等等。

这正是 Mirror 的使命，用极少数的 API 封装所有繁琐甚至重复的工作，提供一种简洁高效的更高级抽象，同时保持原有的开发模式。

Mirror 的特点

• 极简 API（只有 4 个新 API）
• 易于上手
• Redux action 从未如此简单
• 支持动态创建 model
• 强大的 hook 机制

Mirror 的用法

使用 create-react-app 创建一个新的 app：

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

创建之后，从 npm 安装 Mirror：

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

下面是使用 mirror 对 action 的用法，index.js 代码如下：

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

// 声明 Redux state, reducer 和 action，
// 所有的 action 都会以相同名称赋值到全局的 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()
    }
  }
})

// 使用 react-redux 的 connect 方法，连接 state 和组件
const App = connect(state => {
  return {count: state.app}
})(props => (
    <div>
      <h1>{props.count}</h1>
      {/* 调用 actions 上的方法来 dispatch action */}
      <button onClick={() => actions.app.decrement()}>-</button>
      <button onClick={() => actions.app.increment()}>+</button>
      {/* dispatch async action */}
      <button onClick={() => actions.app.incrementAsync()}>+ Async</button>
    </div>
  )
)

// 启动 app，render 方法是加强版的 ReactDOM.render
render(<App/>, document.getElementById('root'))

从上面的代码中，可以看出 mirror 的代码很简洁，很高效。除了上面这些 mirror 还支持 Redux DevTools 扩展。mirror 使用额外的 Redux middleware 只需要在mirror.defaults 接口中指定即可。

： » 阿里 React 框架 mirror 使用教程