REDUX-COW开发框架介绍

简介: REDUX-COW 简介 Redux是基于redux的改良框架,抛弃了redux的各种灵活性,保留了最佳的编程实践。相比redux,REDUX-COW具有如下特点: 上手简单 只有 Starter , fire, addAction, addReducer 4个API, 理解成本和使用成本很低。

REDUX-COW 简介

Redux是基于redux的改良框架,抛弃了redux的各种灵活性,保留了最佳的编程实践。相比redux,REDUX-COW具有如下特点:

上手简单

只有 Starter , fire, addAction, addReducer 4个API, 理解成本和使用成本很低。

约定胜于规则

redux-cow没有redux的灵活性,而是提供了最好的使用方法,只要遵循,即可以写出人人都可理解的代码。

低耦合性

redux-cow 使用了只有一个中心的全局事件派发机制,任何组件,任何模块都可以一条命令直达数据处理中心。
降低了模块间的耦合性。

REDUX-COW的事件流工作方式

image.png

任何一条事件的派发,都先到达action里进行处理,然后同样事件会到达reducer里处理,并最终更新到view.

安装

npm install redux-cow 
AI 代码解读

API

Starter

Starter为程序入口的API, Starter只有一个方法 ,就是Starter.run。

import {Starter} from 'redux-cow';
import app from './app';
Starter.run(app);
AI 代码解读

任何一个基于redux-cow开发的程序,入口都一样

addAction

增加一个action处理器

import {addAction, fire} from 'redux-cow';

//静态payload的action,不带参数的action
/*
 fire({
    type: 'ADD_ONE'
 })
 */
addAction({
    type: 'ADD_ONE',
    payload: 1
});

// 动态payload
/*
 fire({
    type: 'ADD_CUSTOM',
    payload: 6
 })
 */
addAction({
    type: 'ADD_CUSTOM',
    payload: (value)=> {
        return value;
    }
});
AI 代码解读

addReducer

增加一个数据处理器, 每一条响应的action,都会产生一条响应的数据处理器


import {addReducer} from 'redux-cow';
/**
 * 这里的value,相当于state.value
 */
addReducer({
    value(initValue=0, action){
        switch (action.type) {
            case 'ADD_ONE':
            case 'ADD_CUSTOM':
                return initValue + action.payload;
            default:
                return initValue;
        }
    }
});
AI 代码解读

addReducer 每一个key 值,都会在state里增加一个对应的值。
以上的value,在 root view(app.js)的 this.props.value里可以获取到。

fire

fire是全局的命令派发器,可以在任意的模块里派发,并在reducer里进行处理。
fire能派发三种命令

不带参数的静态命令

以下代码派发一条,静态命令

fire({
   type: 'ADD_ONE'
});
AI 代码解读
带参数的动态命令
fire({
   type: 'ADD_CUSTOM',
   payload: 6
});
AI 代码解读
异步请求的命令

异步请求的命令,payload的值函数,异步请求的命令不会进一步被reducer处理
以下为异步请求的命令

addAction({
    type: 'FETCH_LIST_DATA',
    payload: (params)=>{
        return ()=> {
            //更改Loading的状态
            fire({
                type: 'IS_LOADING_DATA',
                payload: true
            });

            let d =  [{value: "模拟数据" }];
            setTimeout(()=> {

                fire({
                    type: 'IS_LOADING_DATA',
                    payload: false
                });

                fire({
                    type: 'FETCH_LIST_DATA_SUCCESS',
                    payload: d
                });
            }, 2000);
        }
    }
});
AI 代码解读
默认的启动命令 APP_START

框架内置了程序的启动命令,希望在action和reducer里对改命令进行处理,做程序的数据初始化操作

import {APP_START} from '@ali/qdux';
addAction({
    type: APP_START,
    payload: 'initValue'
})

addReducer({
    value(state="", action){
        if(action.type == 'APP_START') {
            return action.payload;
        }
        return state;
    }
})
AI 代码解读

app 文件

app为程序的入口View文件,和一般的view并无任何区别,
通过Starter.run(app)后, app里会增加reduer里的所有属性
在代码里直接获取即可

import {View, Text, Button} from 'nuke';
import {createElement, Component, render} from 'rax';
import {fire} from '@ali/qdux';

class Counter extends Component {
    onClick=(v)=> {
        fire({
            type: 'BUTTON_CLICK',
            payload: v
        })
    }
    render() {

        return (
            <View style={{flex:1,flexDirection: 'row',justifyContent: 'flex-start'}}>
                <Button onPress={() => this.onClick(-1)}>减少</Button>
                <Text>{this.props.value}</Text>
                <Button onPress={() => this.onClick(1)}>增加 </Button>
            </View>
        );
    }
}

module.exports = Counter;
AI 代码解读

更多的例子可以查看example里的例子。

在千牛里使用redux-cow框架

千牛5.10.0以后已经内置redux-cow,
如果在开发里需要使用redux-cow修改webpack.config.js,
externals里增加”redux-cow”: “commonjs redux-cow”即可。
不需要安装redux-cow

使用自带的例子

例子使用qap-cli开发,执行以下命令既可以看到响应的例子

npm install qap-cli -g
git clone  https://github.com/cowjs/redux-cow.git
cd ./examples
npm install
qap debug
AI 代码解读

最后

本框架暂时只支持rax, 将在下一步支持react
更多例子源码请查看: https://github.com/cowjs/redux-cow/tree/master/examples/rax/src

目录
打赏
0
0
0
0
62
分享
相关文章
如何自己搭建一个网站
今天的文章总结适合0基础,网站搭建的技巧和流程,哪怕你是小白,不会编程,也可以制作非常漂亮且实用的企业网站、政务网站、学校网站等,如果想做个人博客更是不在话下。希望我的经验能帮助更多没有过多的经费、没有建站基础的朋友。用户跟着我的文章流程基本上一周就可以快速搭建出一个高端、大气、具有营销型、自动SEO、H5的网站。
213 6
|
4月前
|
Java静态代码块深度剖析:机制、特性与最佳实践
在Java中,静态代码块(或称静态初始化块)是指类中定义的一个或多个`static { ... }`结构。其主要功能在于初始化类级别的数据,例如静态变量的初始化或执行仅需运行一次的初始化逻辑。
147 4
Syslog 管理工具
Syslog是一种在TCP/IP网络中传递记录消息的标准,广泛应用于系统日志管理和分析。它由Syslog监听器、数据库和过滤组件组成,用于收集、存储和分析日志。Syslog消息遵循RFC 5424定义的格式,包括标头、结构化数据和消息内容。日志管理工具如EventLog Analyzer可自动处理日志,提供实时警报、关联分析、归档和报表等功能,帮助管理员高效管理网络事件。
122 10
大数据处理技术
【4月更文挑战第10天】大数据处理涵盖采集、预处理、存储、分析挖掘、展现和应用等关键步骤。采集涉及多种类型数据,预处理确保数据质量,存储管理关注规模、速度和安全,分析挖掘利用机器学习发现价值,展现和应用则通过可视化和检索实现数据价值。云计算和AI强化了大数据处理能力,整体目标是提取数据中的价值,驱动企业和社会进步。
703 4
大数据处理技术
|
9月前
|
使用vue3+vite+electron构建小项目介绍Electron进程间通信
使用vue3+vite+electron构建小项目介绍Electron进程间通信
1197 3
畅捷通的 Serverless 探索实践之路
畅捷通非 Serverless 架构向 Serverless 架构转型,提高了5个核心运行稳定性,同时管理简化运维工作,真正的提升系统资源利用率。
129071 1
畅捷通的 Serverless 探索实践之路
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等