Awesome Open Source
Awesome Open Source

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.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,513,161
Reactjs (72,819
Redux (13,075
Framework (6,633
Redux Saga (1,291
React Router V4 (584
Related Projects