前幾天看到寸誌的知乎文章，關於阿裏前端推出的Mirror框架，在這裏記錄一下。

Mirror是基於React，React-router，Redux的一套前端框架，總的來說是對它們的封裝和強化。

其中，Redux對狀態管理的流程很清晰，但是就代碼來說，存在不少重復勞動，而Mirror對其進行了簡化。

以下是一個Todo的例子

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)

actions.model()方法將Redux中的action和reducers合二為一了。

使用actions.todos.add(‘...‘)來發起reducers中的add方法。（很像dva有木有- -）

以上是同步action，Mirror對異步action也有相應的處理，以及基於React-router 4.x對路由進行了重新的定義。

原文詳情

歡迎補充和指正

阿裏前端推出的新的React框架Mirror