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

spaassy-redux

v1.0.0

Published

SpaAssy-Redux

Downloads

1

Readme

spaassy-redux 是spaassy的核心依赖。基于react-redux并对其进行了改写。

spaassy-redux对外暴露以下API:

  • AsyncComponent

AsyncComponent是一个函数,这个函数会接受一个字符串参数,然后返回一个异步加载组件。主要是用于spaassy项目中react组件懒加载。

返回的懒加载组件外层会有一个以参数命名className的div,之所以这么做,是为了方便开发者对组件样式做隔离,防止样式污染。你也可以不传参数,这样返回出来的组件就没有外层div。

示例:

import {
    AsyncComponent
} from 'spaassy-redux'

let AsyncComp = AsyncComponent('home')

const routers = [{
        path: '/',
        exact: true,
        component: AsyncComp(() => import('@views/home/demoOne'))
    },
    {
        path: '/demoTwo',
        component: AsyncComp(() => import('@views/home/demoTwo'))
    }
]

export default routers
  • SpaAssyProvider

SpaAssyProvider 的作用是替代react-redux 的Provider 组件。spaassy-redux内部改写了bindActionCreators、combineReducers、createReducer、promiseMiddleware,并集成到了SpaassyProvider 组件当中。所以你不需要另外再配置和执行以上四个函数。

SpaAssyProvider 有以下几个参数:

参数 | 说明 | 类型 | 默认值 --------------|---------|----------|--------- rootReducers | 创建的reducer函数集合 | Function[] | - namespace | redux命名空间,用来隔离store内部的数据 | String | - mainProject | 用来定义当前的工程是portal,区别于子系统 | boolean | -

示例:

import React from 'react';
import ReactDom from 'react-dom';
import App from '@views/app';
import { SpaAssyProvider } from 'spaassy-redux'
import 'lodash'
import './common';

import rootReducers from '@store'

const appEle = document.getElementById('app');
const namespace = process.env.SYSTEMNAME

ReactDom.render(
    <SpaAssyProvider
        rootReducers={rootReducers}
        namespace={namespace}
        mainProject
    >
        <App />
    </SpaAssyProvider>,
    appEle
);

if (module.hot) {
    console.log('启用热加载更新!')
    module.hot.accept();
}
  • SpaAssyConnect

SpaAssyConnect 是一个函数,接受一个字符串类型参数,返回一个装饰器函数。 返回的装饰器函数用来绑定组件与store中的数据。

示例:

import React from 'react';
import { SpaAssyConnect } from 'spaassy-redux'
import { setTest } from '@store/test/test_action'

import './index.less'

const namespace = process.env.SYSTEMNAME

@SpaAssyConnect(namespace)(state => ({ store: state }), { setTest: setTest })
class Home extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {

        return (
            <div className="homeContent">{this.props.store.testReducer.str}
            </div>
        )
    }
}

export default Home;

示例中,执行

const namespace = process.env.SYSTEMNAME
SpaAssyConnect(namespace)

返回的是一个装饰器函数,这个函数内部接收两个参数:

参数 | 说明 | 类型 | 默认值 --------------|---------|----------|-------------------- mapStateToProps | 映射store中的值到当前组件props,参数类型为function 和数组,为function的时候 有一个默认参数state,该function 返回一个新的对象。当参数为数组的时候,数组内容就是store数据里的key,会映射到当前组件的props中 | Funcionth or String[] | - mapDispatchToProps | 映射action方法到当前组件props | Object | -

SpaAssyProvider 中为了系统store 数据隔离使用了nameSpace, 它会在初始化数据的时候为每一个系统生成一个命名空间。所以当你用SpaAssyConnect 绑定数据的时候也需要传入一个nameSpace 来指明你是要哪个命名空间内的数据。nameSpace 可以指明一个,也可以传递多个,这样在微前端应用中一个子系统可以获取其它子系统或是portal系统中的数据。但是,nameSpace 参数为多个的情况下,第一个nameSpace 必须是本系统的nameSpace,因为dispatch 是以第一个nameSpace 去触发aciton的, 本系统只能修改store 内部本系统的数据。

  • SpaAssyRegister

SpaAssyRegister 是一个class类,提供子系统将路由组件和reducer注入到portal系统的方法。也给portal系统提供获取子系统路由和reducer的方法:

子系统路由、reducer注册示例:

import {
    SpaAssyRegister
} from 'spaassy-redux'
import reducers from '@store'
import routers from '@/views/rootRouters'

// example:
const namespace = process.env.SYSTEMNAME

let option = {
    namespace: namespace,
    routers: [...routers],
    reducers: {
        ...reducers
    }
}
const spaassyRegister = new SpaAssyRegister(option)

spaassyRegister.addRouters()
spaassyRegister.registerReducer()

portal系统获取子系统路由示例:

import { AsyncComponent } from 'spaassy-redux'
import rootRouters from '@views/rootRouters'
import {
    SpaAssyRegister
} from 'spaassy-redux'

const spaassyRegister = new SpaAssyRegister()

const subRouters = spaassyRegister.getRouters()
let subRouterList = []
Object.keys(subRouters).map(o => {
    subRouterList.push(...subRouters[o])
})

const routers = [
    // ...rootRouters,
    ...subRouterList
]

export default routers

spaassyRegister 类的方法:

方法 | 说明 | 参数 | 返回值 |
--------------|---------|----------|--------- addRouters | 往portal系统中注册routers的方法 | Router[] | - registerReducer | 往portal系统中注册reducers的方法 | Reducer[] | - getRouters | 主系统portal用来获取子系统router的方法,参数为子系统注册路由的nameSpace,如果不穿参数,则获取全部子系统路由 | String or null | - getReducers | 主系统portal用来获取子系统reducer的方法,参数为子系统注册路由的nameSpace,如果不穿参数,则获取全部子系统reducer | String or null | -