README.md

Mickey

一款轻量、高效、易上手的前端框架，无痛开发基于 React 和 Redux 的应用

完全基于 redux，redux-saga 和 react-router 实现，对 Redux 用户极其友好

(Inspired by dva)

View README in English

特性

• 轻量的API：只有 6 个新方法，易学易用
• 不再需要使用 diapatch 和 put 方法，也不需要维护 action 字符串
• 支持动态加载：结合 code-splitting 可以实现路由和模型动态加载
• 支持 HMR：结合 babel-plugin-mickey-model-loader 实现组件和模型热替换
• 功能完备的插件机制

快速开始

使用 create-react-app 创建一个新的 app：

$ npm i -g create-react-app
$ create-react-app my-app

然后安装 mickey：

$ cd my-app
$ npm install mickey --save
$ npm start

修改项目中的 index.js 如下：

import React from 'react'
import createApp, {connect, injectActions} from 'mickey'

// 1. Initialize
const app = createApp()

// 2. Model
app.model({
  namespace: 'counter',
  state: {
    count: 0,
    loading: false,
  },
  increment: state => ({ ...state, count: state.count + 1 }),
  decrement: state => ({ ...state, count: state.count - 1 }),
  incrementAsync: {
    * effect(payload, { call }, { succeed }) {
      const delay = timeout => new Promise((resolve) => {
        setTimeout(resolve, timeout)
      })
      yield call(delay, 2000)
      yield succeed()
    },
    prepare: state => ({ ...state, loading: true }),
    succeed: state => ({ ...state, count: state.count + 1, loading: false }),
  },
})

// 3. Component
const Comp = (props) => (
  <div>
    <h1>{props.counter.count}</h1>
    <button onClick={() => props.actions.counter.decrement()}>-</button>
    <button onClick={() => props.actions.counter.increment()}>+</button>
    <button onClick={() => props.actions.counter.incrementAsync()}>+ Async</button>
  </div>
)

// 4. Connect state with component and inject `actions`
const App = injectActions(
    connect(state => ({ counter: state.counter })(Comp)
)

// 5. View
app.render(<App />, document.getElementById('root'))

示例项目

• Counter：简单的计数器
• Counter-Persist：搭配 redux-persist使用
• Counter-Immutable：搭配 ImmutableJS 使用
• Counter-Persist-Immutable：搭配 redux-persist 和 ImmutableJS 使用
• Counter-Undo：搭配 redux-undo 使用
• Simple-Router：基于 [email protected]
• mickey-todo (demo): 简单的 TODO 应用
• mickey-vstar (demo)：查询指定 Github 账号中被加星项目并按加星数排序
• HackerNews (demo)：基于 mickey 实现的 HackerNews

了解更多

• API Reference
• API 文档
• mickey.svg 下载自 Free Vectors

相关项目

• mickey-model-extend 扩展 mickey model 的工具函数
• babel-plugin-mickey-model-loader 向 mickey 实例中注入 load 方法并提供 HMR 支持
• babel-plugin-mickey-model-validator 验证 mickey 模型中潜在的语法错误，如在异步 action 处理方法中调用 call 时忘记使用 yield 关键字

贡献代码

非常欢迎给我们提 MR，如果喜欢我们的代码请在右上角加星。

发现任何 BUG 和使用问题请给我们提 ISSUE。