阿里前端推出新的 React 框架：Mirror

Mirror 是一款基于 React、Redux 和 react-router 的前端框架，簡(jiǎn)潔高效、靈活可靠。

為什么？

我們熱愛 React 和 Redux。但是，Redux 中有太多的樣板文件，需要很多的重復(fù)勞動(dòng)，這一點(diǎn)令人沮喪；更別提在實(shí)際的 React 應(yīng)用中，還要集成 react-router 的路由了。

一個(gè)典型的 React/Redux 應(yīng)用看起來像下面這樣：

actions.js

export?const?ADD_TODO?=?'todos/add'export?const?COMPLETE_TODO?=?'todos/complete'export?function?addTodo(text)?{??return?{????type:?ADD_TODO,
????text
??}
}export?function?completeTodo(id)?{??return?{????type:?COMPLETE_TODO,
????id
??}
}復(fù)制代碼

reducers.js

import?{?ADD_TODO,?COMPLETE_TODO?}?from?'./actions'let?nextId?=?0export?default?function?todos(state?=?[],?action)?{??switch?(action.type)?{????case?ADD_TODO:??????return?[...state,?{text:?action.text,?id:?nextId++}]????case?COMPLETE_TODO:??????return?state.map(todo?=>?{????????if?(todo.id?===?action.id)?todo.completed?=?true
????????return?todo
??????})????default:??????return?state
??}
}復(fù)制代碼

Todos.js

import?{?addTodo,?completeTodo?}?from?'./actions'//?...//?在某個(gè)事件處理函數(shù)中dispatch(addTodo('a?new?todo'))//?在另一個(gè)事件處理函數(shù)中dispatch(completeTodo(42))復(fù)制代碼

看起來是不是有點(diǎn)繁冗？這還是沒考慮 異步 action 的情況呢。如果要處理異步 action，還需要引入 middleware（比如 redux-thunk 或者 redux-saga），那么代碼就更繁瑣了。

使用 Mirror 重寫

Todos.js

import?mirror,?{?actions?}?from?'mirrorx'let?nextId?=?0mirror.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
??????})
????}
??}
})//?...//?在某個(gè)事件處理函數(shù)中actions.todos.add('a?new?todo')//?在另一個(gè)事件處理函數(shù)中actions.todos.complete(42)復(fù)制代碼

是不是就簡(jiǎn)單很多了？只需一個(gè)方法，即可定義所有的 action 和 reducer（以及 異步 action）。

而且，這行代碼：

actions.todos.add('a?new?todo')復(fù)制代碼

完全等同于這行代碼：

dispatch({??type:?'todos/add',??text:?'a?new?todo'})復(fù)制代碼

完全不用關(guān)心具體的 action type，不用寫大量的重復(fù)代碼。簡(jiǎn)潔，高效。

異步 action

上述代碼示例僅僅針對(duì)同步 action。

事實(shí)上，Mirror 對(duì)異步 action 的處理，也同樣簡(jiǎn)單：

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

沒錯(cuò)，這樣就定義了一個(gè)異步 action。上述代碼的效果等同于如下代碼：

actions.todos.addSync?=?(data,?getState)?=>?{??return?dispatch({????type:?'todos/addAsync',
????data
??})
}復(fù)制代碼

調(diào)用 actions.todos.addSync 方法，則會(huì) dispatch 一個(gè) type 為 todos/addAsync 的 action。

你可能注意到了，處理這樣的 action，必須要借助于 middleware。不過你完全不用擔(dān)心，使用 Mirror 無須引入額外的 middleware，你只管定義 action/reducer，然后簡(jiǎn)單地調(diào)用一個(gè)函數(shù)就行了。

更簡(jiǎn)單的路由

Mirror 完全按照 react-router 4.x 的接口和方式定義路由，因此沒有任何新的學(xué)習(xí)成本。

更方便的是，Mirror 的 Router 組件，其 history 對(duì)象以及跟 Redux store 的聯(lián)結(jié)是自動(dòng)處理過的，所以你完全不用關(guān)心它們，只需關(guān)心你自己的各個(gè)路由即可。

而且，手動(dòng)更新路由也非常簡(jiǎn)單，調(diào)用 actions.routing 對(duì)象上的方法即可更新。

理念

Mirror 的設(shè)計(jì)理念是，在盡可能地避免發(fā)明新的概念，并保持現(xiàn)有開發(fā)模式的前提下，減少重復(fù)勞動(dòng)，提高開發(fā)效率。

Mirror 總共只提供了 4 個(gè)新的 API，其余僅有的幾個(gè)也都是已存在于 React/Redux/react-router 的接口，只不過做了封裝和強(qiáng)化。

所以，Mirror 并沒有“顛覆” React/Redux 開發(fā)流，只是簡(jiǎn)化了接口調(diào)用，省去了樣板代碼：

cdn.xitu.io/2017/8/20/6351144f021a9076a4bd22341f328840?imageView2/0/w/1280/h/960/format/webp/ignore-error/1">

在對(duì)路由的處理上，也是如此。

如何使用？

使用 create-react-app 創(chuàng)建一個(gè)新的 app：

$?npm?i?-g?create-react-app
$?create-react-app?my-app復(fù)制代碼

創(chuàng)建之后，從 npm 安裝 Mirror：

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