阿里前端推出的 React 框架Mirror

感覺更像是一個腳手架，省去了一些重複勞動，提高開發效率。

基於 React、Redux 和 react-router

寫法：

import mirror, { actions } from 'mirrorx'
let nextId = 0
mirror.model({
 name: 'todos',
 initialState: [],
 reducers: {
 add(state, text) {
 return [...state, {text, id: nextId++}]
 },
 complete(state, id) {
 return state.map(todo => {
 if (todo.id === id) todo.completed = true
 return todo
 })
 }
 }
})
// ...
// 在某個事件處理函數中
actions.todos.add('a new todo')
// 在另一個事件處理函數中
actions.todos.complete(42)

異步 action

mirror.model({
// 省略前述代碼
 effects: {
async addAsync(data, getState) {
const res = await Promise.resolve(data)
// 調用 `actions` 上的方法 dispatch 一個同步 action
 actions.todos.add(res)
 }
 }
})

安裝：

使用 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