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

@ra-lib/model

v0.1.14

Published

redux封装

Downloads

140

Readme

Model

简化redux写法,整合一些常用功能:

  1. 同步localStorage、sessionStorage
  2. undoable功能
  3. 错误、成功提示
  4. 异步处理

使用说明如下:

export default {
    /**
     * 初始化 state
     *
     * 推荐将model中用到的所有state,都进行初始化:
     * 1. 合理的初始化值,可以避免使用错误;
     * 2. 可以通过state列表快速知晓当前model提供的数据结构
     * */
    state: {
        name: '默认值',
        user: null,
        syncObj: {
            good: 123,
            bar: {
                a: {
                    aa: 'aa',
                    aaa: 'aaa',
                    aaaa: ['a', 'a1', 'a2'],
                },
            },
            foo: ['f', 'f1'],
        },
    },
    /**
     * 将 state 同步到 localStorage中
     * 默认false,两种传值方式:
     * 1. true 所有当前model state 都同步
     * 2. [path, path, ...] 指定jsonpath同步,详见:https://lodash.com/docs/4.17.15#get
     */
    syncLocal: [
        'syncObj.bar.a.aaaa[1]',
        'syncObj.foo',
        'name',
        'user',
    ],
    /**
     * 配置同 syncLocal,同步到sessionStorage中
     */
    // syncSession: true,

    /**
     * 同步、异步都做try捕获,出现错误是否调用handleError方法进行错误处理,
     * 默认 true,全部处理,可以单独指定哪些需要自动处理
     */
    errorTip: {
        async: false, // 异步提示
        sync: false, // 同步提示
        getUser: '获取用户失败了吧!!!', // getUser提示 优先级最高
    },

    /**
     * 操作成功提示,默认false,规则同errorTip
     */
    successTip: {
        async: false, // 异步提示
        sync: false, // 同步提示
        getUser: '获取用户成功!!!', // getUser提示 默认 "操作成功"
        setUser: '设置用户成功',
    },
    /**
     * 撤销、重做
     * 默认false,两种赋值方式:
     * 1. true,当前model所有方法都将触发撤销、重做历史记录,配置将使用redux-undo默认值
     * 2. object,指定配置,详细参考 https://github.com/omnidan/redux-undo
     *      新增include、exclude两个配置,对标 redux-undo filter。一般只配置一个即可,如果两个同时存在,include生效
     *
     * 如果配置了 undoable
     * 1. state数据结构将被转化成:(只影响connect取值,不影响method返回值)
     * demo = {
     *   future: []
     *   group: null
     *   index: 4
     *   limit: 5
     *   past: (4) [{…}, {…}, {…}, {…}]
     *   present: {name: 1618027715626, ...}
     * }
     * 2. 新增方法:(model中不要定义如下一些方法,会被覆盖掉)
     * `${modelName}Undo`  (demoUndo)
     * `${modelName}Redo`
     * `${modelName}Jump`
     * `${modelName}JumpToPast`
     * `${modelName}JumpToFuture`
     * `${modelName}ClearHistory`
     * */
    undoable: { // https://github.com/omnidan/redux-undo
        include: ['setName'],
        exclude: ['setOptions'], // include exclude 同时存在,include将覆盖exclude
        limit: 5,
    },
    /**
     * 异步防抖,默认true,异步还是会执行,只是确保结果的顺序
     * 两种传参方式:
     * 1. true 异步全部防抖
     * 2. ['getUser'] 指定getUser方法防抖,其他不防抖
     */
    // debounce: [
    //     // 'testAsync',
    // ],
    /**
     * 同步方法,返回一个对象,或者 其他,如果返回的不是对象,将不会合并到state中
     * 内部ActionType: action_user_setName (action_模块名_函数名)
     * @param name 自定义参数
     * @param state 当前model state 数据
     * @returns {{name}} 返回:1. 对象 将于state进行合并;2. falsity 假值,不做state处理
     */
    setName(name, state) {
        console.log('同步方法获取的参数', name, state);
        return {name};
    },
    setOptions: options => {
        console.log('setOptions 方法被调用');
        return {options};
    },

    /**
     * 异步方法,返回promise 注意不支持箭头函数写法:testAsync: async (time) => {...},
     * 数据中自动添加 state.getUserLoading、state.getUserError 数据
     * 内部ActionType: action_user_getUser_resolve action_user_getUser_reject action_user_getUser_padding
     * 设置debounce,进行防抖:连续多次调用,如果上次未结束,结果将被抛弃,最后一次调用结果将合并到state中。
     * @param id
     * @param state
     * @returns {Promise<{name: number, age: number}>} promise resolve 值逻辑与同步方法相同
     */
    async getUser(id, state) {
        console.log('getUser state', state);
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                Math.random() > 0.5 ? resolve({user: {name: 123, age: 23}}) : reject(new Error('获取用户失败!'))
            }, 2000)
        })
    },
};