npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mirrorn

v0.1.1

Published

A React Native framework with minimal API and zero boilerplate.

Downloads

1

Readme

Mirrorn

一款简洁、高效、易上手的 React Native 框架。(All inspired by Mirror :)

为什么?

我们热爱 React,Redux 和 React Native。

基于Mirror的优秀代码,我们适配了React Native的同时,集成了 react-navigation 作为路由服务。

一个典型的 React/Redux 应用看起来像下面这样:

  • 一个 actions/ 目录用来手动创建所有的 action type(或者 action creator);
  • 一个 reducers/ 目录以及无数的 switch 来捕获所有的 action type
  • 必须要依赖 middleware 才能处理 异步 action
  • 明确调用 dispatch 方法来 dispatch 所有的 action;
  • 手动创建 history 对象关联路由组件,可能还需要与 store 同步;
  • 调用 history 上的方法或者 dispatch action 来手动更新路由;

存在的问题?太多的 样板文件 以及繁琐甚至重复的劳动。

实际上,上述大部分操作都是可以简化的。比如,在单个 API 中创建所有的 actionreducer;比如,简单地调用一个函数来 dispatch 所有的同步和异步 action,且不需要额外引入 middleware;再比如,使用路由的时候只需要关心定义具体的路由,不用去关心 history 对象,等等。

这正是 Mirror 的使命,用极少数的 API 封装所有繁琐甚至重复的工作,提供一种简洁高效的更高级抽象,同时保持原有的开发模式。

特性

  • 极简 API(只有 4 个新 API)
  • 易于上手
  • Redux action 从未如此简单
  • 支持动态创建 model
  • 强大的 hook 机制

快速开始

初始化项目

使用 react-native 创建一个新的 app:

$ npm i -g react-native
$ react-native init RNApp

创建之后使用npm安装mirrorn

$ npm i --save mirrorn
$ react-native run-android
// 或者 react-native run-ios

index.ios.js or index.android.js


...
import mirror, { actions, connect, render, TabNavigator, TabBarBottom } from 'mirrorn'

mirror.model({
  name: 'app',
  initialState: 0,
  reducers: {
    increment (state) {return state + 1},
    decrement (state) {return state - 1}
  }
})

class Count extends React.PureComponent {

  goBack = () => {
    this.props.navigation.goBack()
  }

  render () {
    return (
      <View style={{flex: 1, marginTop: 20}}>
        <Text>{`Count: ${this.props.count}`}</Text>
        <Button title={`-`} onPress={() => actions.app.decrement()}/>
        <Button title={`+`} onPress={() => actions.app.increment()}/>
        <Button title="Go back" onPress={this.goBack}/>
      </View>
    )
  }
}

const CountPage = connect(state => {
  return {count: state.app}
})(Count)

const MainScreen = StackNavigator({
  PageOne:{screen:()=>(<Text>Hello World</Text>)}
})

const RootNavigator = TabNavigator({
  Main: {screen: MainScreen},
  Count: {screen: CountPage}
})

//与Mirrorx保持一致,使用 render 代替 AppRegistry 
render('RNStart', RootNavigator) 

指南

与Mirror指南一致。

查看 指南

API

与Mirror API的几点区别:

  • 移除React Router及接口
  • 添加react-navigation所有接口
  • render第一个参数需要填写项目名称

查看 Mirror API 文档

FAQ

是否支持 Redux DevTools 扩展

支持。

是否可以使用额外的 Redux middleware?

可以,在 mirror.defaults 接口中指定即可,具体可查看文档。