mirrorx
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/mirrorx package

    1.1.3 • Public • Published

    Mirror

    npm version build status coverage status license

    查看中文

    A simple and powerful React framework with minimal API and zero boilerplate. (Inspired by dva and jumpstate)

    Painless React and Redux.

    Why?

    We love React and Redux.

    A typical React/Redux app looks like the following:

    • An actions/ directory to manually create all action types (or action creators)
    • A reducers/ directory and tons of switch clause to capture all action types
    • Apply middlewares to handle async actions
    • Explicitly invoke dispatch method to dispatch all actions
    • Manually create history to router and/or sync with store
    • Invoke methods in history or dispatch actions to programmatically changing routes

    The problem? Too much boilerplates and a little bit tedious.

    In fact, most part of the above steps could be simplified. Like, create actions and reducers in a single method, or dispatch both sync and async actions by simply invoking a function without extra middleware, or define routes without caring about history, etc.

    That's exactly what Mirror does, encapsulates the tedious or repetitive work in very few APIs to offer a high level abstraction with efficiency and simplicity, and without breaking the pattern.

    Features

    • Minimal API(only 4 newly introduced)
    • Easy to start
    • Actions done easy, sync or async
    • Support code splitting
    • Full-featured hook mechanism

    Getting Started

    Creating an App

    Use create-react-app to create an app:

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

    After creating, install Mirror from npm:

    $ cd my-app
    $ npm i --save mirrorx
    $ npm start

    index.js

    import React from 'react'
    import mirror, {actions, connect, render} from 'mirrorx'
    
    // declare Redux state, reducers and actions,
    // all actions will be added to `actions`.
    mirror.model({
      name: 'app',
      initialState: 0,
      reducers: {
        increment(state) { return state + 1 },
        decrement(state) { return state - 1 }
      },
      effects: {
        async incrementAsync() {
          await new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve()
            }, 1000)
          })
          actions.app.increment()
        }
      }
    })
    
    // connect state with component
    const App = connect(state => {
      return {count: state.app}
    })(props => (
        <div>
          <h1>{props.count}</h1>
          {/* dispatch the actions */}
          <button onClick={() => actions.app.decrement()}>-</button>
          <button onClick={() => actions.app.increment()}>+</button>
          {/* dispatch the async action */}
          <button onClick={() => actions.app.incrementAsync()}>+ Async</button>
        </div>
      )
    )
    
    // start the app,`render` is an enhanced `ReactDOM.render`
    render(<App />, document.getElementById('root'))

    Demo

    Guide

    See Guide.

    API

    See API Reference.

    Examples

    Change log

    See CHANGES.md.

    FAQ

    Does Mirror support TypeScript?

    Yes, it does.

    Does Mirror support Redux DevTools Extension?

    Yes, Mirror integrates Redux DevTools by default to make your debugging more easily.

    Can I use extra Redux middlewares?

    Yes, specify them in mirror.defaults is all you need to do, learn more from the Docs.

    I'm really into Redux-Saga, is there any way to use it in Mirror?

    Yes of course, take a look at the addEffect option.

    Which version of react-router does Mirror use?

    react-router v4.

    Install

    npm i mirrorx

    DownloadsWeekly Downloads

    49

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    154 kB

    Total Files

    22

    Last publish

    Collaborators

    • llh911001
    • aaronphy