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:

importReactfrom'react'importcreateApp,{connect,injectActions}from'mickey'// 1. Initializeconstapp=createApp()// 2. Modelapp.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 }){constdelay=timeout=>newPromise((resolve)=>{setTimeout(resolve,timeout)})yieldcall(delay,2000)yieldsucceed()},prepare: state=>({ ...state,loading: true}),succeed: state=>({ ...state,count: state.count+1,loading: false}),},})// 3. ComponentconstComp=(props)=>(<div><h1>{props.counter.count}</h1><buttononClick={()=>props.actions.counter.decrement()}>-</button><buttononClick={()=>props.actions.counter.increment()}>+</button><buttononClick={()=>props.actions.counter.incrementAsync()}>+ Async</button></div>)// 4. Connect state with component and inject `actions`constApp=injectActions(connect(state=>({counter: state.counter})(Comp)))// 5. Viewapp.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 react-router@4.x
• 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.