A simple and powerful React framework with minimal API and zero boilerplate. (Inspired by dva and jumpstate)
Painless React and Redux.
We love React and Redux.
A typical React/Redux app looks like the following:
- An
actions/
directory to manually create allaction type
s (oraction creator
s) - A
reducers/
directory and tons ofswitch
clause to capture allaction type
s - Apply middlewares to handle
async action
s - 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 action
s and reducer
s 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.
- Minimal API(only 4 newly introduced)
- Easy to start
- Actions done easy, sync or async
- Support loading models dynamically
- Full-featured hook mechanism
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
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'))
See Guide.
See API Reference.
- User-Dashboard (An example similar to dva-user-dashboard)
- Counter
- Simple-Router
- Todo
See CHANGES.md.
Yes, it does.
Does Mirror support Redux DevTools Extension?
Yes, Mirror integrates Redux DevTools by default to make your debugging more easily.
Yes, specify them in mirror.defaults
is all you need to do, learn more from the Docs.
Yes of course, take a look at the addEffect
option.
react-router v4.