Mickey

Lightweight front-end framework for creating React and Redux based app painlessly.

Totally base on redux, redux-saga and react-router, very friendly to redux users.

(Inspired by dva)

查看中文

Features

• Minimal API (Only 6 newly introduced). Easy to learn, easy to start
• No diapatch, no put, just forget about action types
• Support loading models dynamically with code-splitting to improve performance
• Support HMR for components and models with babel-plugin-mickey-model-loader
• Full-featured hook mechanism

Quick Start

Use create-react-app to create an app:

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

Then install mickey from npm:

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

Update index.js as follow:

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'))

Examples

• Counter: Basic usage of mickey
• Counter-Persist: Work with redux-persist
• Counter-Persist(v5): Work with redux-persist v5
• Counter-Immutable: Work with ImmutableJS
• Counter-Immer: Work with Immer
• Counter-Persist-Immutable: Work with redux-persist and ImmutableJS
• Counter-Persist(v5)-Immutable: Work with redux-persist v5 and ImmutableJS
• Counter-Undo: Work with redux-undo
• Simple-Router: Base on [email protected]
• mickey-todo (demo): Simple Todo application build with mickey
• mickey-vstar (demo): A web app to show your or others GitHub repos stars
• HackerNews (demo): HackerNews clone built with mickey

More

• API Reference
• API 文档
• mickey.svg badaged in this document is download from Free Vectors

Related

• mickey-model-extend Utility method to extend mickey model
• babel-plugin-mickey-model-loader Inject a model loader function to mickey instance with hmr support
• babel-plugin-mickey-model-validator Validate models shipped by mickey to avoid certain syntax pitfalls

Contributing

Pull requests and stars are highly welcome.

For bugs and feature requests, please create an issue.