🤠 Lightweight front-end framework for creating React and Redux based app painlessly.
Switch branches/tags
Nothing to show
Clone or download
Latest commit e179690 Aug 29, 2018

README.md

Mickey

mickey.svg

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)

MIT License

NPM Version Build Status Coverage Status NPM downloads Dependencies Package Quality

查看中文

Features

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

More

Related

Contributing

Pull requests and stars are highly welcome.

For bugs and feature requests, please create an issue.