一款简洁、高效、易上手的 React 框架。(Inspired by dva and jumpstate)
Painless React and Redux.
我们热爱 React 和 Redux。
一个典型的 React/Redux 应用看起来像下面这样:
- 一个
actions/
目录用来手动创建所有的action type
(或者action creator
); - 一个
reducers/
目录以及无数的switch
来捕获所有的action type
; - 必须要依赖 middleware 才能处理
异步 action
; - 明确调用
dispatch
方法来 dispatch 所有的 action; - 手动创建
history
对象关联路由组件,可能还需要与 store 同步; - 调用
history
上的方法或者 dispatch action 来手动更新路由;
存在的问题?太多的 样板文件 以及繁琐甚至重复的劳动。
实际上,上述大部分操作都是可以简化的。比如,在单个 API 中创建所有的 action
和 reducer
;比如,简单地调用一个函数来 dispatch 所有的同步和异步 action,且不需要额外引入 middleware;再比如,使用路由的时候只需要关心定义具体的路由,不用去关心 history
对象,等等。
这正是 Mirror 的使命,用极少数的 API 封装所有繁琐甚至重复的工作,提供一种简洁高效的更高级抽象,同时保持原有的开发模式。
- 极简 API(只有 4 个新 API)
- 易于上手
- Redux action 从未如此简单
- 支持 code splitting
- 强大的 hook 机制
使用 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
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'))
查看 指南。
查看 API 文档。
- User-Dashboard(一个类似 dva-user-dashboard 的示例项目)
- Counter
- Simple-Router
- Todo
查看 CHANGES.md.
支持。
是否支持 Redux DevTools 扩展?
支持。
可以,在 mirror.defaults
接口中指定即可,具体可查看文档。
当然有,查看 addEffect
选项,有详细的说明。
react-router 4.x。