{"id":13671792,"url":"https://github.com/mirrorjs/mirror","last_synced_at":"2025-05-15T07:04:34.088Z","repository":{"id":23399747,"uuid":"98858463","full_name":"mirrorjs/mirror","owner":"mirrorjs","description":"A simple and powerful React framework with minimal API and zero boilerplate.","archived":false,"fork":false,"pushed_at":"2023-01-03T15:14:55.000Z","size":2562,"stargazers_count":1438,"open_issues_count":33,"forks_count":107,"subscribers_count":38,"default_branch":"master","last_synced_at":"2025-04-14T11:11:22.520Z","etag":null,"topics":["mirror","react","react-framework","react-router","redux"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mirrorjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-31T07:02:34.000Z","updated_at":"2025-04-06T09:26:09.000Z","dependencies_parsed_at":"2023-01-14T00:30:22.203Z","dependency_job_id":null,"html_url":"https://github.com/mirrorjs/mirror","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirrorjs%2Fmirror","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirrorjs%2Fmirror/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirrorjs%2Fmirror/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirrorjs%2Fmirror/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mirrorjs","download_url":"https://codeload.github.com/mirrorjs/mirror/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254292039,"owners_count":22046426,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mirror","react","react-framework","react-router","redux"],"created_at":"2024-08-02T09:01:18.863Z","updated_at":"2025-05-15T07:04:29.075Z","avatar_url":"https://github.com/mirrorjs.png","language":"JavaScript","readme":"# Mirror\n\n[![npm version](https://img.shields.io/npm/v/mirrorx.svg?colorB=007ec6\u0026style=flat-square)](https://www.npmjs.com/package/mirrorx) [![build status](https://img.shields.io/travis/mirrorjs/mirror.svg?style=flat-square)](https://travis-ci.org/mirrorjs/mirror) [![coverage status](https://img.shields.io/coveralls/mirrorjs/mirror.svg?style=flat-square)](https://coveralls.io/github/mirrorjs/mirror?branch=master) [![license](https://img.shields.io/github/license/mirrorjs/mirror.svg?style=flat-square)](https://github.com/mirrorjs/mirror/blob/master/LICENSE)\n\n[查看中文](https://github.com/mirrorjs/mirror/blob/master/README_zh.md)\n\nA simple and powerful React framework with minimal API and zero boilerplate. (Inspired by [dva](https://github.com/dvajs/dva) and [jumpstate](https://github.com/jumpsuit/jumpstate))\n\n\u003e Painless React and Redux.\n\n## Why?\n\nWe love React and Redux.\n\nA typical React/Redux app looks like the following:\n\n* An `actions/` directory to manually create all `action type`s (or `action creator`s)\n* A `reducers/` directory and tons of `switch` clause to capture all `action type`s\n* Apply middlewares to handle `async action`s\n* Explicitly invoke `dispatch` method to dispatch all actions\n* Manually create `history` to router and/or sync with store\n* Invoke methods in `history` or dispatch actions to programmatically changing routes\n\nThe problem? [Too much boilerplates](https://github.com/reactjs/redux/blob/master/docs/recipes/ReducingBoilerplate.md) and a little bit tedious.\n\nIn 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.\n\nThat'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.\n\n## Features\n\n* Minimal API(only 4 newly introduced)\n* Easy to start\n* Actions done easy, sync or async\n* Support code splitting\n* Full-featured hook mechanism\n\n## Getting Started\n\n### Creating an App\n\nUse [create-react-app](https://github.com/facebookincubator/create-react-app) to create an app:\n\n```sh\n$ npm i -g create-react-app\n$ create-react-app my-app\n```\n\nAfter creating, install Mirror from npm:\n\n```sh\n$ cd my-app\n$ npm i --save mirrorx\n$ npm start\n```\n\n### `index.js`\n\n```js\nimport React from 'react'\nimport mirror, {actions, connect, render} from 'mirrorx'\n\n// declare Redux state, reducers and actions,\n// all actions will be added to `actions`.\nmirror.model({\n  name: 'app',\n  initialState: 0,\n  reducers: {\n    increment(state) { return state + 1 },\n    decrement(state) { return state - 1 }\n  },\n  effects: {\n    async incrementAsync() {\n      await new Promise((resolve, reject) =\u003e {\n        setTimeout(() =\u003e {\n          resolve()\n        }, 1000)\n      })\n      actions.app.increment()\n    }\n  }\n})\n\n// connect state with component\nconst App = connect(state =\u003e {\n  return {count: state.app}\n})(props =\u003e (\n    \u003cdiv\u003e\n      \u003ch1\u003e{props.count}\u003c/h1\u003e\n      {/* dispatch the actions */}\n      \u003cbutton onClick={() =\u003e actions.app.decrement()}\u003e-\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e actions.app.increment()}\u003e+\u003c/button\u003e\n      {/* dispatch the async action */}\n      \u003cbutton onClick={() =\u003e actions.app.incrementAsync()}\u003e+ Async\u003c/button\u003e\n    \u003c/div\u003e\n  )\n)\n\n// start the app，`render` is an enhanced `ReactDOM.render`\nrender(\u003cApp /\u003e, document.getElementById('root'))\n```\n\n### [Demo](https://codesandbox.io/s/814mnvw1qj)\n\n## Guide\n\nSee [Guide](https://github.com/mirrorjs/mirror/blob/master/docs/guide.md).\n\n## API\n\nSee [API Reference](https://github.com/mirrorjs/mirror/blob/master/docs/api.md).\n\n## Examples\n\n* [User-Dashboard](https://github.com/mirrorjs/user-dashboard-example) (An example similar to dva-user-dashboard)\n* [Counter](https://github.com/mirrorjs/mirror/blob/master/examples/counter)\n* [Simple-Router](https://github.com/mirrorjs/mirror/blob/master/examples/simple-router)\n* [Todo](https://github.com/mirrorjs/mirror/blob/master/examples/todo)\n\n## Change log\n\nSee [CHANGES.md](https://github.com/mirrorjs/mirror/blob/master/CHANGES.md).\n\n## FAQ\n\n#### Does Mirror support TypeScript?\n\nYes, it does.\n\n#### Does Mirror support [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension)?\n\nYes, Mirror integrates Redux DevTools by default to make your debugging more easily.\n\n#### Can I use extra Redux middlewares?\n\nYes, specify them in [`mirror.defaults`](https://github.com/mirrorjs/mirror/blob/master/docs/api.md#-optionsmiddlewares) is all you need to do, learn more from the Docs.\n\n#### I'm really into Redux-Saga, is there any way to use it in Mirror?\n\nYes of course, take a look at the [`addEffect`](https://github.com/mirrorjs/mirror/blob/master/docs/api.md#-optionsaddeffect) option.\n\n#### Which version of react-router does Mirror use?\n\nreact-router v4.\n\n","funding_links":[],"categories":["JavaScript","Redux","Marks"],"sub_categories":["[React - A JavaScript library for building user interfaces](http://facebook.github.io/react)"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmirrorjs%2Fmirror","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmirrorjs%2Fmirror","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmirrorjs%2Fmirror/lists"}