本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
最近两天阿里一直占据着头条，一个是支付宝小程序，一个是 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 接口中指定即可。
最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！
本文原文出处：业余草： » 阿里 React 框架 mirror 使用教程